@kne/react-pdf-sign 1.0.0 → 1.0.2

package/README.md

@@ -20,13 +20,13 @@ npm i --save @kne/react-pdf-sign
 
 ## 核心特性
 
-**直观的签名体验** - 提供手写签名画板，用户可以通过鼠标或触摸设备自然地绘制签名，签名支持实时预览和调整。
+**直观的签名体验** - 提供手写签名画板，用户可以通过鼠标或触摸设备自然地绘制签名，签名支持实时预览和调整。支持在签名画板上叠加自定义内容，如日期、文字等。
 
 **灵活的定位控制** - 签名区域可以在 PDF 页面上自由拖拽、缩放和精确定位，支持保持比例缩放，确保签名的视觉效果。
 
 **完整的 PDF 操作** - 基于 pdf-lib 和 react-pdf，支持多页 PDF 文档的浏览、签名定位和最终签名文件的生成。
 
-**组件化设计** - 提供多个独立组件（PDFSign、PDFViewer、LocationLayer、useSignature），开发者可以根据需求灵活组合使用。
+**组件化设计** - 提供多个独立组件（PDFSign、PDFViewer、LocationLayer、useSignature），开发者可以根据需求灵活组合使用。支持默认签名位置设置和位置变化回调，便于集成到现有业务流程。
 
 **国际化支持** - 内置中英文语言包，支持多语言切换，适合国际化应用。
 
@@ -40,7 +40,7 @@ npm i --save @kne/react-pdf-sign
 - 证书颁发系统
 - 法律文件签署
 
-该组件库简化了 PDF 签名的复杂实现，开发者只需要几行代码就能集成完整的签名功能，大大提升了开发效率。
+该组件库简化了 PDF 签名的复杂实现，开发者只需要几行代码就能集成完整的签名功能，大大提升了开发效率。新增的签名叠加功能让签名更加丰富和个性化，满足各种业务场景需求。
 
 ### 示例
 
@@ -75,7 +75,15 @@ const BaseExample = () => {
         </Button>
         <Button
           onClick={() => {
+            const { size } = ref.current.getLocation();
             signatureModal({
+              mask: (
+                <Flex justify="flex-end" align="flex-end" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>
+                  签字日期: {new Date().toLocaleDateString()}
+                </Flex>
+              ),
+              width: size.width,
+              height: size.height,
               onSuccess: file => {
                 setSign(URL.createObjectURL(file));
               }
@@ -236,23 +244,46 @@ render(<BaseExample />);
 
 ```jsx
 const { useSignature } = _ReactPdfSign;
-const { Button } = antd;
+const { Button, Flex } = antd;
+
+const { useState } = React;
 
 const BaseExample = () => {
+  const [result, setResult] = useState(null);
   const modal = useSignature();
   return (
-    <div>
-      <Button
-        onClick={() => {
-          modal({
-            onSuccess: file => {
-              console.log(file);
-            }
-          });
-        }}>
-        签名
-      </Button>
-    </div>
+    <Flex vertical gap={12}>
+      {result && <img src={result} alt="result" style={{ width: '300px' }} />}
+      <Flex gap={8}>
+        <Button
+          onClick={() => {
+            modal({
+              onSuccess: file => {
+                console.log(file);
+                setResult(URL.createObjectURL(file));
+              }
+            });
+          }}>
+          签名
+        </Button>
+        <Button
+          onClick={() => {
+            modal({
+              mask: (
+                <Flex justify="flex-end" align="flex-end" style={{ height: '100%', width: '100%', padding: '10px', boxSizing: 'border-box' }}>
+                  签字日期: {new Date().toLocaleDateString()}
+                </Flex>
+              ),
+              onSuccess: file => {
+                console.log(file);
+                setResult(URL.createObjectURL(file));
+              }
+            });
+          }}>
+          带有日期模版的签名
+        </Button>
+      </Flex>
+    </Flex>
   );
 };
 
@@ -267,14 +298,17 @@ render(<BaseExample />);
 
 主要的 PDF 签名组件，集成了 PDF 查看器和签名定位功能。
 
-| 属性          | 类型     | 默认值       | 说明             |
-|-------------|--------|-----------|----------------|
-| url         | string | -         | PDF 文件的 URL 地址 |
-| signature   | string | -         | 签名图片的 URL 地址   |
-| width       | number | 200       | 签名区域的宽度        |
-| height      | number | 50        | 签名区域的高度        |
-| padding     | number | 8         | 签名区域变换器的内边距    |
-| placeholder | string | '拖拽到签名位置' | 签名区域的占位文本      |
+| 属性             | 类型       | 默认值              | 说明                |
+|----------------|----------|-------------------|-------------------|
+| url            | string   | -                 | PDF 文件的 URL 地址    |
+| signature      | string   | -                 | 签名图片的 URL 地址      |
+| width          | number   | 200               | 签名区域的宽度           |
+| height         | number   | 50                | 签名区域的高度           |
+| padding        | number   | 8                 | 签名区域变换器的内边距       |
+| placeholder    | string   | '拖拽到签名位置'        | 签名区域的占位文本         |
+| filename       | string   | 'signed-document.pdf' | 生成签名PDF的文件名       |
+| defaultLocation | object   | -                 | 默认签名位置信息          |
+| onChange       | function | -                 | 签名位置变化回调函数       |
 
 #### 实例方法
 
@@ -334,7 +368,8 @@ PDF 文档查看器组件，提供 PDF 页面浏览功能。
 |------------|----------|-----------------|------------|
 | filename   | string   | 'signature.png' | 签名文件名      |
 | width      | number   | 200             | 签名画板宽度     |
-| height     | number   | 50              | 签名画板高度     |
+| height     | number   | 80              | 签名画板高度     |
+| mask       | ReactNode | -               | 签名画板叠加内容   |
 | onSuccess  | function | -               | 签名完成回调     |
 | modalProps | object   | -               | Modal 组件属性 |
 
@@ -343,4 +378,4 @@ PDF 文档查看器组件，提供 PDF 页面浏览功能。
 | 参数     | 类型     | 默认值 | 说明       |
 |--------|--------|-----|----------|
 | width  | number | 200 | 默认签名画板宽度 |
-| height | number | 50  | 默认签名画板高度 |
+| height | number | 80  | 默认签名画板高度 |

package/dist/index.css

@@ -51,6 +51,7 @@
 ._6TDb- {
   border: 1px solid #cccccc;
   border-radius: 4px;
+  position: relative;
 }
 
 ._2CGF4 {
@@ -61,4 +62,13 @@
 ._kWe3k .ant-modal-confirm-paragraph {
   max-width: unset;
 }
+
+._FSvLv {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,cAAc;EACd,kBAAkB;EAClB,iBAAiB;EACjB,WAAW;AACb;AACA;;EAEE,cAAc;AAChB;;AAEA;EACE,wEAAwE;AAC1E;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,WAAW;AACb;;AAEA;;EAEE,kBAAkB;EAClB,eAAe;EACf,qBAAqB;EACrB,WAAW;EACX,YAAY;EACZ,eAAe;EACf,YAAY;AACd;;AAEA;EACE,kBAAkB;EAClB,YAAY;EACZ,SAAS;EACT,2BAA2B;EAC3B,cAAc;EACd,0CAA0C;EAC1C,yCAAyC;EACzC,kBAAkB;AACpB;;AAEA;EACE,QAAQ;AACV;;AAEA;EACE,yBAAyB;EACzB,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,gBAAgB;AAClB","file":"index.css","sourcesContent":[".pdf-view-container {\n  margin: 0 auto;\n  position: relative;\n  max-width: 1200px;\n  width: 100%;\n}\n.pdf-view-container :global(.react-pdf__Page__canvas),\n.pdf-view-container :global(.textLayer) {\n  margin: 0 auto;\n}\n\n.pdf-view {\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n}\n\n.pdf-view-children {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n}\n\n.pdf-view-page-control-left,\n.pdf-view-page-control-right {\n  position: absolute;\n  font-size: 30px;\n  top: calc(50% - 19px);\n  z-index: 10;\n  padding: 8px;\n  cursor: pointer;\n  opacity: 0.3;\n}\n\n.pdf-view-page-control-current {\n  position: absolute;\n  bottom: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n  color: #666666;\n  background-color: rgba(255, 255, 255, 0.5);\n  text-shadow: 0 0 8px white, 0 0 8px white;\n  border-radius: 4px;\n}\n\n.pdf-view-page-control-right {\n  right: 0;\n}\n\n.signature-container {\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n}\n\n.signature-canvas {\n  width: 100%;\n  height: 100%;\n}\n\n.signature-modal :global .ant-modal-confirm-paragraph {\n  max-width: unset;\n}"]}
+{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,cAAc;EACd,kBAAkB;EAClB,iBAAiB;EACjB,WAAW;AACb;AACA;;EAEE,cAAc;AAChB;;AAEA;EACE,wEAAwE;AAC1E;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,WAAW;AACb;;AAEA;;EAEE,kBAAkB;EAClB,eAAe;EACf,qBAAqB;EACrB,WAAW;EACX,YAAY;EACZ,eAAe;EACf,YAAY;AACd;;AAEA;EACE,kBAAkB;EAClB,YAAY;EACZ,SAAS;EACT,2BAA2B;EAC3B,cAAc;EACd,0CAA0C;EAC1C,yCAAyC;EACzC,kBAAkB;AACpB;;AAEA;EACE,QAAQ;AACV;;AAEA;EACE,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;EACZ,oBAAoB;AACtB","file":"index.css","sourcesContent":[".pdf-view-container {\n  margin: 0 auto;\n  position: relative;\n  max-width: 1200px;\n  width: 100%;\n}\n.pdf-view-container :global(.react-pdf__Page__canvas),\n.pdf-view-container :global(.textLayer) {\n  margin: 0 auto;\n}\n\n.pdf-view {\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n}\n\n.pdf-view-children {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n}\n\n.pdf-view-page-control-left,\n.pdf-view-page-control-right {\n  position: absolute;\n  font-size: 30px;\n  top: calc(50% - 19px);\n  z-index: 10;\n  padding: 8px;\n  cursor: pointer;\n  opacity: 0.3;\n}\n\n.pdf-view-page-control-current {\n  position: absolute;\n  bottom: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n  color: #666666;\n  background-color: rgba(255, 255, 255, 0.5);\n  text-shadow: 0 0 8px white, 0 0 8px white;\n  border-radius: 4px;\n}\n\n.pdf-view-page-control-right {\n  right: 0;\n}\n\n.signature-container {\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  position: relative;\n}\n\n.signature-canvas {\n  width: 100%;\n  height: 100%;\n}\n\n.signature-modal :global .ant-modal-confirm-paragraph {\n  max-width: unset;\n}\n\n.signature-mask {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}"]}

package/dist/index.js

@@ -15,6 +15,7 @@ var useImage = require('use-image');
 var reactIntl = require('@kne/react-intl');
 var pdfLib = require('pdf-lib');
 var SignatureCanvas = require('react-signature-canvas');
+var snapdom = require('@zumer/snapdom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -44,7 +45,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 = _ref => {
@@ -183,7 +184,7 @@ const LocationLayer = withLocale(p => {
   } = reactIntl.useIntl();
   const {
       width = 200,
-      height = 50,
+      height = 80,
       padding = 8,
       stageWidth,
       stageHeight,
@@ -198,6 +199,7 @@ const LocationLayer = withLocale(p => {
   const [signatureImage] = useImage__default["default"](signature);
   const groupRef = react.useRef();
   const signRef = react.useRef();
+  const targetRef = react.useRef();
   const transformerRef = react.useRef();
   const computedSignLocation = () => {
     const absolutePosition = signRef.current.absolutePosition();
@@ -229,8 +231,8 @@ const LocationLayer = withLocale(p => {
           y: Math.round((stageHeight - height) / 2)
         }
       });
-      setIsInit(true);
     }
+    setIsInit(true);
   });
   const themeColor = react.useMemo(() => {
     const el = document.createElement('div');
@@ -245,7 +247,7 @@ const LocationLayer = withLocale(p => {
   }, []);
   react.useEffect(() => {
     if (isInit) {
-      transformerRef.current.nodes([groupRef.current]);
+      transformerRef.current.nodes([targetRef.current]);
     }
   }, [isInit]);
   if (!(isInit && value)) {
@@ -261,19 +263,22 @@ const LocationLayer = withLocale(p => {
         draggable: true,
         ref: groupRef,
         onDragEnd: computedSignLocation,
-        onTransformEnd: computedSignLocation,
-        children: [signatureImage ? /*#__PURE__*/jsxRuntime.jsx(reactKonva.Image, {
-          width: width,
-          height: height,
-          image: signatureImage,
-          cornerRadius: 8,
-          ref: signRef
-        }) : /*#__PURE__*/jsxRuntime.jsx(reactKonva.Rect, {
-          width: width,
-          height: height,
-          fill: "#f0f0f0",
-          cornerRadius: 8,
-          ref: signRef
+        children: [/*#__PURE__*/jsxRuntime.jsx(reactKonva.Group, {
+          ref: targetRef,
+          onTransformEnd: computedSignLocation,
+          children: signatureImage ? /*#__PURE__*/jsxRuntime.jsx(reactKonva.Image, {
+            width: width,
+            height: height,
+            image: signatureImage,
+            cornerRadius: 8,
+            ref: signRef
+          }) : /*#__PURE__*/jsxRuntime.jsx(reactKonva.Rect, {
+            width: width,
+            height: height,
+            fill: "#f0f0f0",
+            cornerRadius: 8,
+            ref: signRef
+          })
         }), /*#__PURE__*/jsxRuntime.jsx(reactKonva.Text, {
           text: signatureImage ? '' : placeholder,
           fontSize: 16,
@@ -295,8 +300,7 @@ const LocationLayer = withLocale(p => {
         borderStroke: themeColor,
         rotateAnchorStroke: themeColor,
         anchorStroke: themeColor,
-        padding: padding,
-        enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+        padding: padding
       })]
     })
   });
@@ -2507,7 +2511,46 @@ function isEqual(value, other) {
 
 var isEqual_1 = isEqual;
 
-const _excluded$1 = ["placeholder", "signature", "url", "width", "height", "padding", "filename"];
+const signPdfFile = function (pdfSignature) {
+  try {
+    const {
+      x,
+      y,
+      page,
+      width,
+      height,
+      signature,
+      url,
+      filename
+    } = pdfSignature;
+    return Promise.resolve(window.fetch(url)).then(function (response) {
+      return Promise.resolve(response.arrayBuffer()).then(function (pdfBytes) {
+        return Promise.resolve(pdfLib.PDFDocument.load(pdfBytes)).then(function (pdfDoc) {
+          const pdfPage = pdfDoc.getPage(page - 1);
+          return Promise.resolve(window.fetch(signature).then(res => res.arrayBuffer())).then(function (signatureBytes) {
+            return Promise.resolve(pdfDoc.embedPng(signatureBytes)).then(function (signatureImageEmbed) {
+              pdfPage.drawImage(signatureImageEmbed, {
+                x,
+                y,
+                width,
+                height
+              });
+              return Promise.resolve(pdfDoc.save()).then(function (modifiedPdfBytes) {
+                return new window.File([modifiedPdfBytes], filename, {
+                  type: 'application/pdf'
+                });
+              });
+            });
+          });
+        });
+      });
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+const _excluded$1 = ["placeholder", "signature", "url", "width", "height", "padding", "filename", "defaultLocation", "onChange"];
 const PDFSign = withLocale(/*#__PURE__*/react.forwardRef((_ref, ref) => {
   let {
       placeholder,
@@ -2516,10 +2559,12 @@ const PDFSign = withLocale(/*#__PURE__*/react.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] = react.useState({});
+  const [location, setLocation] = react.useState(Object.assign({}, defaultLocation));
   const [pdfProps, setPdfProps] = react.useState(null);
   const {
     formatMessage
@@ -2536,18 +2581,21 @@ const PDFSign = withLocale(/*#__PURE__*/react.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 = react.useCallback(function () {
     try {
       if (!pdfProps) {
@@ -2555,37 +2603,7 @@ const PDFSign = withLocale(/*#__PURE__*/react.forwardRef((_ref, ref) => {
           id: 'loadingError'
         }));
       }
-      const {
-        x,
-        y,
-        page,
-        width,
-        height,
-        signature,
-        url
-      } = pdfSignature;
-      return Promise.resolve(window.fetch(url)).then(function (response) {
-        return Promise.resolve(response.arrayBuffer()).then(function (pdfBytes) {
-          return Promise.resolve(pdfLib.PDFDocument.load(pdfBytes)).then(function (pdfDoc) {
-            const pdfPage = pdfDoc.getPage(page - 1);
-            return Promise.resolve(window.fetch(signature).then(res => res.arrayBuffer())).then(function (signatureBytes) {
-              return Promise.resolve(pdfDoc.embedPng(signatureBytes)).then(function (signatureImageEmbed) {
-                pdfPage.drawImage(signatureImageEmbed, {
-                  x,
-                  y,
-                  width,
-                  height
-                });
-                return Promise.resolve(pdfDoc.save()).then(function (modifiedPdfBytes) {
-                  return new window.File([modifiedPdfBytes], filename, {
-                    type: 'application/pdf'
-                  });
-                });
-              });
-            });
-          });
-        });
-      });
+      return Promise.resolve(signPdfFile(pdfSignature));
     } catch (e) {
       return Promise.reject(e);
     }
@@ -2596,6 +2614,13 @@ const PDFSign = withLocale(/*#__PURE__*/react.forwardRef((_ref, ref) => {
     getPdfSignature: () => pdfSignature,
     sign: () => signPdf()
   }));
+  const handlerChange = useRefCallback__default["default"](onChange);
+  react.useEffect(() => {
+    handlerChange == null || handlerChange({
+      pdfSignature,
+      location
+    });
+  }, [pdfSignature, location, handlerChange]);
   return /*#__PURE__*/jsxRuntime.jsx(PDFViewer, _extends({}, props, {
     url: url,
     children: _ref2 => {
@@ -2629,7 +2654,7 @@ const PDFSign = withLocale(/*#__PURE__*/react.forwardRef((_ref, ref) => {
   }));
 }));
 
-const _excluded = ["filename", "onSuccess"];
+const _excluded = ["filename", "onSuccess", "width", "height", "mask"];
 const dataURLtoBlob = dataURL => {
   let arr = dataURL.split(',');
   // 注意base64的最后面中括号和引号是不转译的
@@ -2651,7 +2676,8 @@ const Signature = withLocale(_ref => {
     onSuccess,
     filename,
     width,
-    height
+    height,
+    mask = null
   } = _ref;
   const {
     formatMessage
@@ -2660,22 +2686,27 @@ const Signature = withLocale(_ref => {
     message
   } = antd.App.useApp();
   const signatureCanvasRef = react.useRef(null);
+  const maskRef = react.useRef(null);
   return /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
     vertical: true,
     gap: 12,
     className: classnames__default["default"](style['signature-modal-content'], 'signature-modal-content'),
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classnames__default["default"](style['signature-container'], 'signature-container'),
       style: {
         width: '368px',
         height: Math.round(height * 368 / width) + "px"
       },
-      children: /*#__PURE__*/jsxRuntime.jsx(SignatureCanvas__default["default"], {
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"](style['signature-mask'], 'signature-mask'),
+        ref: maskRef,
+        children: mask
+      }), /*#__PURE__*/jsxRuntime.jsx(SignatureCanvas__default["default"], {
         ref: signatureCanvasRef,
         canvasProps: {
           className: classnames__default["default"](style['signature-canvas'], 'signature-canvas')
         }
-      })
+      })]
     }), /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
       justify: "flex-end",
       align: "center",
@@ -2689,18 +2720,47 @@ const Signature = withLocale(_ref => {
         })
       }), /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
         type: "primary",
-        onClick: () => {
-          if (signatureCanvasRef.current.isEmpty()) {
-            message.error(formatMessage({
-              id: 'signatureEmptyError'
-            }));
-            return;
+        onClick: function () {
+          try {
+            function _temp2() {
+              const file = new window.File([dataURLtoBlob(result)], filename, {
+                type: 'image/png'
+              });
+              onClose();
+              onSuccess(file);
+            }
+            if (signatureCanvasRef.current.isEmpty()) {
+              message.error(formatMessage({
+                id: 'signatureEmptyError'
+              }));
+              return Promise.resolve();
+            }
+            let result = signatureCanvasRef.current.toDataURL('image/png');
+            const _temp = function () {
+              if (mask) {
+                return Promise.resolve(snapdom.snapdom.toPng(maskRef.current, {
+                  scale: 2
+                })).then(function (maskPng) {
+                  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;
+                  return Promise.resolve(new Promise(resolve => {
+                    resultImage.onload = resolve;
+                  })).then(function () {
+                    ctx.drawImage(resultImage, 0, 0, canvas.width, canvas.height);
+                    result = canvas.toDataURL('image/png');
+                  });
+                });
+              }
+            }();
+            return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+          } catch (e) {
+            return Promise.reject(e);
           }
-          const file = new window.File([dataURLtoBlob(signatureCanvasRef.current.toDataURL('image/png'))], filename, {
-            type: 'image/png'
-          });
-          onClose();
-          onSuccess(file);
         },
         children: formatMessage({
           id: 'signatureConfirmText'
@@ -2719,24 +2779,18 @@ const Title = withLocale(() => {
     })
   });
 });
-const useSignature = props => {
+const useSignature = () => {
   const {
-    width,
-    height
-  } = Object.assign({}, {
-    width: 200,
-    height: 50
-  }, props);
-  const {
-    modal,
-    message
+    modal
   } = antd.App.useApp();
-  react.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({}, {
@@ -2751,6 +2805,7 @@ const useSignature = props => {
       content: /*#__PURE__*/jsxRuntime.jsx(Signature, {
         width: width,
         height: height,
+        mask: mask,
         filename: filename,
         onSuccess: onSuccess,
         onClose: () => {