@kne/react-pdf-sign 1.1.1 → 1.1.4

package/README.md

@@ -133,7 +133,9 @@ const { Flex, Button, Switch, App } = antd;
 const BaseExample = () => {
   const [pdfFile, setPdfFile] = useState(null);
   const [isEdit, setIsEdit] = useState(true);
+  const [isFat, setIsFat] = useState(false);
   const ref = useRef(null);
+  const [signatureList, setSignatureList] = useState([]);
   const signatureModal = useSignature();
   const { message } = App.useApp();
   return (
@@ -149,44 +151,65 @@ const BaseExample = () => {
             }}
           />
         </Button>
-        {pdfFile && (
-          <Flex gap={8}>
-            <div>编辑模式:</div>
-            <Switch value={isEdit} onChange={setIsEdit} />
-          </Flex>
-        )}
-        {pdfFile && isEdit && (
-          <Button
-            onClick={() => {
-              ref.current.addSignLocation();
-            }}>
-            添加签名位置
-          </Button>
-        )}
-        {pdfFile && !isEdit && (
-          <Button
-            onClick={async () => {
-              try {
-                const blob = await ref.current.sign();
-                const link = document.createElement('a');
-                const url = URL.createObjectURL(blob);
-                link.href = url;
-                link.download = 'signed-document.pdf';
-                link.click();
-                URL.revokeObjectURL(url);
-              } catch (e) {
-                message.error(e.message);
-              }
-            }}>
-            生成签名PDF
-          </Button>
-        )}
+      </Flex>
+      <Flex gap={8} align="center" justify="space-between">
+        <Flex gap={8} align="center">
+          {pdfFile && (
+            <Flex gap={8}>
+              <div>编辑模式:</div>
+              <Switch value={isEdit} onChange={setIsEdit} />
+            </Flex>
+          )}
+          {pdfFile && !isEdit && (
+            <Flex gap={8}>
+              <div>页面是否平铺:</div>
+              <Switch value={isFat} onChange={setIsFat} />
+            </Flex>
+          )}
+          {pdfFile && isEdit && (
+            <Button
+              onClick={() => {
+                ref.current.addSignLocation();
+              }}>
+              添加签名位置
+            </Button>
+          )}
+        </Flex>
+        <Flex gap={8} align="center">
+          {pdfFile && !isEdit && (
+            <Flex>
+              <div>已签名/签名区:</div>
+              <div>
+                {signatureList.filter(item => item.signature).length}/{signatureList.length}
+              </div>
+            </Flex>
+          )}
+          {pdfFile && !isEdit && (
+            <Button
+              onClick={async () => {
+                try {
+                  const blob = await ref.current.sign();
+                  const link = document.createElement('a');
+                  const url = URL.createObjectURL(blob);
+                  link.href = url;
+                  link.download = 'signed-document.pdf';
+                  link.click();
+                  URL.revokeObjectURL(url);
+                } catch (e) {
+                  message.error(e.message);
+                }
+              }}>
+              生成签名PDF
+            </Button>
+          )}
+        </Flex>
       </Flex>
       {pdfFile ? (
         <PDFSignMulti
           url={pdfFile}
           ref={ref}
           isEdit={isEdit}
+          isFlat={!isEdit && isFat}
           onSign={({ size, callback }) => {
             signatureModal({
               mask: (
@@ -201,6 +224,7 @@ const BaseExample = () => {
               }
             });
           }}
+          onChange={setSignatureList}
         />
       ) : null}
     </Flex>
@@ -534,6 +558,7 @@ render(<BaseExample />);
 | filename             | string   | 'signed-document.pdf' | 生成签名PDF的文件名    |
 | defaultSignatureList | array    | -                     | 默认签名位置列表       |
 | isEdit               | boolean  | -                     | 是否处于编辑模式       |
+| isFlat               | boolean  | -                     | 是否平铺显示所有页面     |
 | onSign               | function | -                     | 点击签名区域时的回调函数   |
 | onChange             | function | -                     | 签名位置列表变化回调函数   |
 
@@ -551,14 +576,15 @@ render(<BaseExample />);
 
 PDF 文档查看器组件，提供 PDF 页面浏览功能。
 
-| 属性          | 类型     | 默认值  | 说明                |
-|-------------|--------|------|-------------------|
-| url         | string | -    | PDF 文件的 URL 地址    |
-| className   | string | -    | 自定义 CSS 类名        |
-| defaultPage | number | 1    | 默认显示的页码           |
-| maxWidth    | number | 1200 | 最大显示宽度            |
-| pdfjsUrl    | string | -    | 自定义 pdf.js CDN 地址 |
-| apis        | object | -    | API 配置对象          |
+| 属性          | 类型      | 默认值  | 说明                |
+|-------------|---------|------|-------------------|
+| url         | string  | -    | PDF 文件的 URL 地址    |
+| className   | string  | -    | 自定义 CSS 类名        |
+| defaultPage | number  | 1    | 默认显示的页码           |
+| maxWidth    | number  | 1200 | 最大显示宽度            |
+| pdfjsUrl    | string  | -    | 自定义 pdf.js CDN 地址 |
+| apis        | object  | -    | API 配置对象          |
+| isFlat      | boolean | -    | 是否平铺显示所有页面        |
 
 #### children 渲染属性
 

package/dist/index.css

@@ -9,6 +9,11 @@
   margin: 0 auto;
 }
 
+._RgZXN {
+  width: 100%;
+  position: relative;
+}
+
 ._PAju1 {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 }

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;EAClB,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;AACd;;AAEA;EACE,gBAAgB;EAChB,WAAW;AACb;;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  width: 100%;\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}"]}
+{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,cAAc;EACd,kBAAkB;EAClB,iBAAiB;EACjB,WAAW;AACb;AACA;;EAEE,cAAc;AAChB;;AAEA;EACE,WAAW;EACX,kBAAkB;AACpB;;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;EAChB,WAAW;AACb;;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-container {\n  width: 100%;\n  position: relative;\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  width: 100%;\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

@@ -57,6 +57,7 @@ const PDFViewer = _ref => {
     pdfjsUrl: pdfjsUrlProps,
     url,
     maxWidth = 1200,
+    isFlat,
     children
   } = _ref;
   const {
@@ -84,29 +85,14 @@ const PDFViewer = _ref => {
       setWidth(Math.min(ref.current.clientWidth, maxWidth));
     }
   });
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    ref: ref,
-    className: classnames__default["default"](className, style['pdf-view-container'], 'pdf-view-container'),
-    style: {
-      maxWidth: maxWidth
-    },
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classnames__default["default"](style['pdf-view'], 'pdf-view'),
-      children: /*#__PURE__*/jsxRuntime.jsx(reactPdf.Document, _extends({}, Object.assign({}, documentProps), {
-        loading: /*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
-          justify: "center",
-          children: /*#__PURE__*/jsxRuntime.jsx(antd.Spin, {})
-        }),
-        onLoadSuccess: _ref2 => {
-          let {
-              numPages
-            } = _ref2;
-            _objectWithoutPropertiesLoose(_ref2, _excluded$4);
-          setPageSize(numPages);
-          if (!Number.isInteger(defaultPage)) {
-            setCurrentPage(numPages);
-          }
-        },
+  const renderPage = _ref2 => {
+    let {
+      currentPage
+    } = _ref2;
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classnames__default["default"](style['pdf-view-container'], 'pdf-view-container'),
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"](style['pdf-view'], 'pdf-view'),
         children: /*#__PURE__*/jsxRuntime.jsx(reactPdf.Page, {
           width: width,
           pageNumber: currentPage,
@@ -120,31 +106,69 @@ const PDFViewer = _ref => {
             });
           }
         })
-      }))
-    }), size && children && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classnames__default["default"](style['pdf-view-children'], 'pdf-view-children'),
-      children: typeof children === 'function' ? children({
-        size,
-        currentPage,
-        pageSize
-      }) : children
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classnames__default["default"](style['pdf-view-page-control'], 'pdf-view-page-control'),
-      children: [currentPage > 1 && /*#__PURE__*/jsxRuntime.jsx(icons.LeftOutlined, {
-        className: classnames__default["default"](style['pdf-view-page-control-left'], 'pdf-view-page-control-left'),
-        onClick: () => {
-          setCurrentPage(currentPage - 1);
-        }
-      }), currentPage < pageSize && /*#__PURE__*/jsxRuntime.jsx(icons.RightOutlined, {
-        className: classnames__default["default"](style['pdf-view-page-control-right'], 'pdf-view-page-control-right'),
-        onClick: () => {
-          setCurrentPage(currentPage + 1);
+      }), size && children && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"](style['pdf-view-children'], 'pdf-view-children'),
+        children: typeof children === 'function' ? children({
+          size,
+          currentPage,
+          pageSize
+        }) : children
+      })]
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: ref,
+    className: classnames__default["default"](className, style['pdf-view-container'], 'pdf-view-container'),
+    style: {
+      maxWidth: maxWidth
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(reactPdf.Document, _extends({}, Object.assign({}, documentProps), {
+      loading: /*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
+        justify: "center",
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Spin, {})
+      }),
+      onLoadSuccess: _ref3 => {
+        let {
+            numPages
+          } = _ref3;
+          _objectWithoutPropertiesLoose(_ref3, _excluded$4);
+        setPageSize(numPages);
+        if (!Number.isInteger(defaultPage)) {
+          setCurrentPage(numPages);
         }
-      }), pageSize ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classnames__default["default"](style['pdf-view-page-control-current'], 'pdf-view-page-control-current'),
-        children: [currentPage, "/", pageSize]
-      }) : null]
-    })]
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
+        vertical: true,
+        gap: 8,
+        children: isFlat ? Array.from({
+          length: pageSize
+        }).map((item, index) => {
+          return /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
+            children: renderPage({
+              currentPage: index + 1
+            })
+          }, index);
+        }) : renderPage({
+          currentPage
+        })
+      }), isFlat ? null : /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classnames__default["default"](style['pdf-view-page-control'], 'pdf-view-page-control'),
+        children: [currentPage > 1 && /*#__PURE__*/jsxRuntime.jsx(icons.LeftOutlined, {
+          className: classnames__default["default"](style['pdf-view-page-control-left'], 'pdf-view-page-control-left'),
+          onClick: () => {
+            setCurrentPage(currentPage - 1);
+          }
+        }), currentPage < pageSize && /*#__PURE__*/jsxRuntime.jsx(icons.RightOutlined, {
+          className: classnames__default["default"](style['pdf-view-page-control-right'], 'pdf-view-page-control-right'),
+          onClick: () => {
+            setCurrentPage(currentPage + 1);
+          }
+        }), pageSize ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: classnames__default["default"](style['pdf-view-page-control-current'], 'pdf-view-page-control-current'),
+          children: [currentPage, "/", pageSize]
+        }) : null]
+      })]
+    }))
   });
 };
 
@@ -658,13 +682,15 @@ const computedPDFSignLocation = ({
 }) => {
   const scaleX = size.width / size.originalWidth;
   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);
+  const pdfX = Math.round(location.size.x);
+  const pdfY = Math.round(size.originalHeight - location.size.y);
+  const signWidth = Math.round(location.size.width);
+  const signHeight = Math.round(location.size.height);
   return {
     scaleX,
     scaleY,
+    pageWidth: size.originalWidth,
+    pageHeight: size.originalHeight,
     pdfX,
     pdfY,
     width: signWidth,
@@ -686,24 +712,25 @@ const PDFSignInner = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     height = 80,
     padding,
     filename = 'signed-document.pdf',
-    defaultLocation,
+    location,
+    setLocation,
     onChange
   } = _ref;
   const initLocation = react.useMemo(() => {
     return getInitLocation({
-      stageWidth: size.width,
-      stageHeight: size.height,
+      stageWidth: size.originalWidth,
+      stageHeight: size.originalHeight,
       width,
       height
     });
   }, [size, width, height]);
-  const [location, setLocationOrigin] = react.useState(Object.assign({}, initLocation, defaultLocation));
-  const setLocation = useRefCallback__default["default"](value => {
-    setLocationOrigin(Object.assign({}, initLocation, value));
-  });
+  const targetLocation = react.useMemo(() => {
+    return Object.assign({}, initLocation, location);
+  }, [initLocation, location]);
+  const setTargetLocation = value => setLocation(Object.assign({}, initLocation, value));
   const pdfSignature = react.useMemo(() => {
     return Object.assign({}, computedPDFSignLocation({
-      location,
+      location: targetLocation,
       size
     }), {
       signature,
@@ -713,7 +740,7 @@ const PDFSignInner = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       pageWidth: Math.round(size.originalWidth),
       pageHeight: Math.round(size.originalHeight)
     });
-  }, [location, signature, url, filename, size, currentPage]);
+  }, [targetLocation, signature, url, filename, size, currentPage]);
   const signPdf = react.useCallback(function () {
     try {
       return Promise.resolve(signPdfFile(pdfSignature));
@@ -723,7 +750,7 @@ const PDFSignInner = /*#__PURE__*/react.forwardRef((_ref, ref) => {
   }, [pdfSignature]);
   react.useImperativeHandle(ref, () => ({
     getLocation: () => location,
-    setLocation: value => setLocation(value),
+    setLocation: value => setTargetLocation(value),
     getPdfSignature: () => pdfSignature,
     sign: () => signPdf()
   }));
@@ -734,16 +761,22 @@ const PDFSignInner = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       location
     });
   }, [pdfSignature, location, handlerChange]);
-  return /*#__PURE__*/jsxRuntime.jsx(LocationLayer, {
-    stageWidth: size.width,
-    stageHeight: size.height,
-    width: width,
-    height: height,
-    padding: padding,
-    placeholder: placeholder,
-    signature: signature,
-    value: location,
-    onChange: setLocation
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    style: {
+      transform: "scale(" + size.width / size.originalWidth + ")",
+      transformOrigin: '0 0'
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(LocationLayer, {
+      stageWidth: size.originalWidth,
+      stageHeight: size.originalHeight,
+      width: width,
+      height: height,
+      padding: padding,
+      placeholder: placeholder,
+      signature: signature,
+      value: targetLocation,
+      onChange: setTargetLocation
+    })
   });
 });
 const PDFSign = withLocale(/*#__PURE__*/react.forwardRef((_ref2, ref) => {
@@ -759,6 +792,7 @@ const PDFSign = withLocale(/*#__PURE__*/react.forwardRef((_ref2, ref) => {
       onChange
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
+  const [location, setLocation] = react.useState(Object.assign({}, defaultLocation));
   return /*#__PURE__*/jsxRuntime.jsx(PDFViewer, _extends({}, props, {
     url: url,
     children: _ref3 => {
@@ -772,7 +806,8 @@ const PDFSign = withLocale(/*#__PURE__*/react.forwardRef((_ref2, ref) => {
         currentPage: currentPage,
         url: url,
         filename: filename,
-        defaultLocation: defaultLocation,
+        location: location,
+        setLocation: setLocation,
         width: width,
         height: height,
         padding: padding,
@@ -4043,12 +4078,12 @@ const PDFSignMultiInner = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     height = 80,
     padding,
     filename = 'signed-document.pdf',
-    defaultSignatureList,
+    signatureList,
+    setSignatureList,
     isEdit,
     onSign,
     onChange
   } = _ref;
-  const [signatureList, setSignatureList] = react.useState(defaultSignatureList || []);
   const {
     formatMessage
   } = reactIntl.useIntl();
@@ -4088,48 +4123,55 @@ const PDFSignMultiInner = /*#__PURE__*/react.forwardRef((_ref, ref) => {
         signatureList: pdfSignatureList
       });
     },
-    addSignLocation: () => {
+    addSignLocation: page => {
       setSignatureList(signatureList => {
         return [...signatureList, Object.assign({}, getInitLocation({
           width,
           height,
-          stageWidth: size.width,
-          stageHeight: size.height
+          stageWidth: size.originalWidth,
+          stageHeight: size.originalHeight
         }), {
-          page: currentPage
+          page: page || currentPage
         })];
       });
     }
   }));
-  return /*#__PURE__*/jsxRuntime.jsx(LocationGroup, {
-    isEdit: isEdit,
-    currentPage: currentPage,
-    stageWidth: size.width,
-    stageHeight: size.height,
-    width: width,
-    height: height,
-    padding: padding,
-    placeholder: placeholder,
-    value: signatureList,
-    onChange: setSignatureList,
-    onClick: _ref2 => {
-      let {
-        index,
-        value
-      } = _ref2;
-      onSign && onSign({
-        size: value.size,
-        callback: signature => {
-          setSignatureList(value => {
-            const newValue = value.slice(0);
-            newValue[index] = Object.assign({}, newValue[index], {
-              signature
+  const scale = size.width / size.originalWidth;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    style: {
+      transform: "scale(" + scale + ")",
+      transformOrigin: '0 0'
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(LocationGroup, {
+      isEdit: isEdit,
+      currentPage: currentPage,
+      stageWidth: size.originalWidth,
+      stageHeight: size.originalHeight,
+      width: width,
+      height: height,
+      padding: padding,
+      placeholder: placeholder,
+      value: signatureList,
+      onChange: setSignatureList,
+      onClick: _ref2 => {
+        let {
+          index,
+          value
+        } = _ref2;
+        onSign && onSign({
+          size: value.size,
+          callback: signature => {
+            setSignatureList(value => {
+              const newValue = value.slice(0);
+              newValue[index] = Object.assign({}, newValue[index], {
+                signature
+              });
+              return newValue;
             });
-            return newValue;
-          });
-        }
-      });
-    }
+          }
+        });
+      }
+    })
   });
 });
 const PDFSignMulti = withLocale(/*#__PURE__*/react.forwardRef((_ref3, ref) => {
@@ -4146,6 +4188,7 @@ const PDFSignMulti = withLocale(/*#__PURE__*/react.forwardRef((_ref3, ref) => {
       isEdit
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded$1);
+  const [signatureList, setSignatureList] = react.useState(defaultSignatureList || []);
   return /*#__PURE__*/jsxRuntime.jsx(PDFViewer, _extends({}, props, {
     url: url,
     children: _ref4 => {
@@ -4159,7 +4202,8 @@ const PDFSignMulti = withLocale(/*#__PURE__*/react.forwardRef((_ref3, ref) => {
         currentPage: currentPage,
         url: url,
         filename: filename,
-        defaultSignatureList: defaultSignatureList,
+        signatureList: signatureList,
+        setSignatureList: setSignatureList,
         width: width,
         height: height,
         padding: padding,
@@ -4367,6 +4411,7 @@ exports.PDFSign = PDFSign;
 exports.PDFSignMulti = PDFSignMulti;
 exports.PDFViewer = PDFViewer;
 exports["default"] = PDFSign;
+exports.signMultiPdfFile = signMultiPdfFile;
 exports.signPdfFile = signPdfFile;
 exports.useSignature = useSignature;
 //# sourceMappingURL=index.js.map