@kne/react-pdf-sign 1.0.5 → 1.1.0

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import { pdfjs, Document, Page } from 'react-pdf';
-import { useMemo, useState, useRef, useEffect, forwardRef, useCallback, useImperativeHandle } from 'react';
+import { useMemo, useState, useRef, useEffect, createElement, forwardRef, useCallback, useImperativeHandle } from 'react';
 import { usePreset } from '@kne/global-context';
 import useResize from '@kne/use-resize';
 import classnames from 'classnames';
@@ -8,7 +8,7 @@ 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 as Image$1, Rect, Text, Transformer } from 'react-konva';
+import { Layer, Group, Image as Image$1, Rect, Text, Transformer, Circle, Line, Stage } from 'react-konva';
 import useControlValue from '@kne/use-control-value';
 import useRefCallback from '@kne/use-ref-callback';
 import useImage from 'use-image';
@@ -38,7 +38,7 @@ function _objectWithoutPropertiesLoose(r, e) {
 
 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 _excluded$4 = ["numPages"];
 const PDFViewer = ({
   className,
   defaultPage,
@@ -91,7 +91,7 @@ const PDFViewer = ({
           let {
               numPages
             } = _ref;
-            _objectWithoutPropertiesLoose(_ref, _excluded$3);
+            _objectWithoutPropertiesLoose(_ref, _excluded$4);
           setPageSize(numPages);
           if (!Number.isInteger(defaultPage)) {
             setCurrentPage(numPages);
@@ -144,8 +144,10 @@ const locale$1 = {
   signatureDefaultTitle: '签名',
   signatureConfirmText: '确认',
   signatureCancelText: '取消',
+  signatureCleanText: '清空',
   signatureEmptyError: '签名内容不能为空',
-  signatureSuccess: '签名成功'
+  signatureSuccess: '签名成功',
+  signatureAdd: '请添加签名'
 };
 
 const locale = {
@@ -154,8 +156,10 @@ const locale = {
   signatureDefaultTitle: 'Signature',
   signatureConfirmText: 'Confirm',
   signatureCancelText: 'Cancel',
+  signatureCleanText: 'Clean',
   signatureEmptyError: 'Signature content cannot be empty',
-  signatureSuccess: 'Signature Success'
+  signatureSuccess: 'Signature Success',
+  signatureAdd: 'Please add signature'
 };
 
 const withLocale = createWithIntlProvider({
@@ -167,8 +171,30 @@ const withLocale = createWithIntlProvider({
   namespace: 'react-pdf-sign'
 });
 
-const _excluded$2 = ["width", "height", "padding", "stageWidth", "stageHeight", "placeholder", "signature"];
-const LocationLayer = withLocale(p => {
+const getInitLocation = ({
+  stageWidth,
+  stageHeight,
+  width,
+  height
+}) => {
+  return {
+    scaleX: 1,
+    scaleY: 1,
+    x: Math.round((stageWidth - width) / 2),
+    y: Math.round((stageHeight - height) / 2),
+    size: {
+      width,
+      height,
+      x: Math.round((stageWidth - width) / 2),
+      y: Math.round((stageHeight - height) / 2)
+    }
+  };
+};
+
+const _excluded$3 = ["width", "height", "padding", "stageWidth", "stageHeight", "placeholder", "signature", "active", "onClose", "onClick"],
+  _excluded2 = ["stageWidth", "stageHeight"],
+  _excluded3 = ["stageWidth", "stageHeight", "isEdit", "onClick", "currentPage"];
+const LocationLayerInner = withLocale(p => {
   const {
     formatMessage
   } = useIntl();
@@ -181,9 +207,12 @@ const LocationLayer = withLocale(p => {
       placeholder = formatMessage({
         id: 'locationLayerPlaceholder'
       }),
-      signature
+      signature,
+      active,
+      onClose,
+      onClick
     } = p,
-    props = _objectWithoutPropertiesLoose(p, _excluded$2);
+    props = _objectWithoutPropertiesLoose(p, _excluded$3);
   const [value, setValue] = useControlValue(props);
   const [isInit, setIsInit] = useState(false);
   const [signatureImage] = useImage(signature);
@@ -193,7 +222,7 @@ const LocationLayer = withLocale(p => {
   const computedSignLocation = () => {
     const absolutePosition = signRef.current.absolutePosition();
     const size = signRef.current.getClientRect();
-    setValue({
+    setValue(value => Object.assign({}, value, {
       size: {
         width: Math.round(size.width),
         height: Math.round(size.height),
@@ -204,22 +233,16 @@ const LocationLayer = withLocale(p => {
       scaleY: Number(groupRef.current.attrs.scaleY.toFixed(2)),
       x: Math.round(groupRef.current.attrs.x),
       y: Math.round(groupRef.current.attrs.y)
-    });
+    }));
   };
   const initValue = useRefCallback(() => {
     if (['scaleX', 'scaleY', 'x', 'y', 'size'].some(name => !Object.assign({}, value).hasOwnProperty(name))) {
-      setValue({
-        scaleX: 1,
-        scaleY: 1,
-        x: Math.round((stageWidth - width) / 2),
-        y: Math.round((stageHeight - height) / 2),
-        size: {
-          width,
-          height,
-          x: Math.round((stageWidth - width) / 2),
-          y: Math.round((stageHeight - height) / 2)
-        }
-      });
+      setValue(value => Object.assign({}, value, getInitLocation({
+        stageWidth,
+        stageHeight,
+        width,
+        height
+      })));
     }
     setIsInit(true);
   });
@@ -242,607 +265,186 @@ const LocationLayer = withLocale(p => {
   if (!(isInit && value)) {
     return null;
   }
+  return /*#__PURE__*/jsxs(Layer, {
+    children: [/*#__PURE__*/jsx(Group, {
+      x: value.x,
+      y: value.y,
+      draggable: active !== false,
+      ref: groupRef,
+      onDragMove: computedSignLocation,
+      onDragEnd: computedSignLocation,
+      scaleX: value.scaleX,
+      scaleY: value.scaleY,
+      onTransform: computedSignLocation,
+      onTransformEnd: computedSignLocation,
+      onTap: onClick,
+      onClick: onClick,
+      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, {
+      listening: false,
+      x: value.x,
+      y: value.y,
+      text: signatureImage ? '' : placeholder,
+      fontSize: 16,
+      fill: "#666666",
+      fontFamily: "Arial",
+      align: "center",
+      verticalAlign: "middle",
+      width: width * value.scaleX,
+      height: height * value.scaleY
+    }), /*#__PURE__*/jsx(Transformer, {
+      ref: transformerRef,
+      visible: active !== false,
+      keepRatio: true,
+      flipEnabled: false,
+      rotateEnabled: false,
+      borderStroke: themeColor,
+      rotateAnchorStroke: themeColor,
+      anchorStroke: themeColor,
+      padding: padding
+    }), active === true && /*#__PURE__*/jsxs(Group, {
+      x: value.x + width * value.scaleX - 4,
+      y: value.y + 4,
+      onClick: () => {
+        onClose && onClose();
+      },
+      children: [/*#__PURE__*/jsx(Circle, {
+        radius: 6,
+        stroke: themeColor,
+        strokeWidth: 1,
+        fill: "white"
+      }), /*#__PURE__*/jsx(Line, {
+        points: [-2, -2, 2, 2],
+        stroke: themeColor,
+        strokeWidth: 1,
+        lineCap: "round"
+      }), /*#__PURE__*/jsx(Line, {
+        points: [-2, 2, 2, -2],
+        stroke: themeColor,
+        strokeWidth: 1,
+        lineCap: "round"
+      })]
+    })]
+  });
+});
+const LocationLayer = _ref => {
+  let {
+      stageWidth,
+      stageHeight
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded2);
   return /*#__PURE__*/jsx(Stage, {
     width: stageWidth,
     height: stageHeight,
-    children: /*#__PURE__*/jsxs(Layer, {
-      children: [/*#__PURE__*/jsxs(Group, {
-        x: value.x,
-        y: value.y,
-        draggable: true,
-        ref: groupRef,
-        onDragEnd: computedSignLocation,
-        scaleX: value.scaleX,
-        scaleY: value.scaleY,
-        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,
-          fill: "#666666",
-          fontFamily: "Arial",
-          align: "center",
-          verticalAlign: "middle",
-          width: width,
-          height: height
-        })]
-      }), /*#__PURE__*/jsx(Transformer, {
-        ref: transformerRef,
-        keepRatio: true,
-        flipEnabled: false,
-        rotateEnabled: false,
-        borderStroke: themeColor,
-        rotateAnchorStroke: themeColor,
-        anchorStroke: themeColor,
-        padding: padding
-      })]
+    children: /*#__PURE__*/jsx(LocationLayerInner, _extends({}, props, {
+      stageWidth: stageWidth,
+      stageHeight: stageHeight
+    }))
+  });
+};
+const LocationGroup = _ref2 => {
+  let {
+      stageWidth,
+      stageHeight,
+      isEdit = true,
+      onClick,
+      currentPage
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+  const [value, onChange] = useControlValue(Object.assign({}, {
+    defaultValue: []
+  }, props));
+  const [active, setActive] = useState(0);
+  return /*#__PURE__*/jsx(Stage, {
+    width: stageWidth,
+    height: stageHeight,
+    children: value.map((item, index) => {
+      if (item.page && item.page !== currentPage) {
+        return null;
+      }
+      return /*#__PURE__*/createElement(LocationLayerInner, _extends({}, props, {
+        key: index,
+        stageWidth: stageWidth,
+        stageHeight: stageHeight,
+        value: item,
+        signature: item.signature,
+        active: isEdit && active === index,
+        onClick: () => {
+          if (isEdit) {
+            if (active !== index) {
+              setActive(index);
+            }
+          } else {
+            onClick && onClick({
+              value: value[index],
+              index,
+              allValue: value
+            });
+          }
+        },
+        onClose: () => {
+          onChange(value => {
+            const newValue = value.slice(0);
+            newValue.splice(index, 1);
+            return newValue;
+          });
+        },
+        onChange: item => {
+          onChange(value => {
+            const newValue = value.slice(0);
+            newValue[index] = item;
+            return newValue;
+          });
+        }
+      }));
     })
   });
-});
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function createCommonjsModule(fn) {
-  var module = { exports: {} };
-	return fn(module, module.exports), module.exports;
-}
-
-/** Detect free variable `global` from Node.js. */
-
-var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-
-var _freeGlobal = freeGlobal;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = _freeGlobal || freeSelf || Function('return this')();
-
-var _root = root;
-
-/** Built-in value references. */
-var Symbol = _root.Symbol;
-
-var _Symbol = Symbol;
-
-/** Used for built-in method references. */
-var objectProto$3 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$2 = objectProto$3.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString$1 = objectProto$3.toString;
-
-/** Built-in value references. */
-var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
-
-/**
- * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the raw `toStringTag`.
- */
-function getRawTag(value) {
-  var isOwn = hasOwnProperty$2.call(value, symToStringTag$1),
-      tag = value[symToStringTag$1];
-
-  try {
-    value[symToStringTag$1] = undefined;
-    var unmasked = true;
-  } catch (e) {}
-
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
-    }
-  }
-  return result;
-}
-
-var _getRawTag = getRawTag;
-
-/** Used for built-in method references. */
-var objectProto$2 = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString = objectProto$2.toString;
-
-/**
- * Converts `value` to a string using `Object.prototype.toString`.
- *
- * @private
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- */
-function objectToString(value) {
-  return nativeObjectToString.call(value);
-}
-
-var _objectToString = objectToString;
-
-/** `Object#toString` result references. */
-var nullTag = '[object Null]',
-    undefinedTag = '[object Undefined]';
-
-/** Built-in value references. */
-var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
-
-/**
- * The base implementation of `getTag` without fallbacks for buggy environments.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function baseGetTag(value) {
-  if (value == null) {
-    return value === undefined ? undefinedTag : nullTag;
-  }
-  return (symToStringTag && symToStringTag in Object(value))
-    ? _getRawTag(value)
-    : _objectToString(value);
-}
-
-var _baseGetTag = baseGetTag;
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return value != null && (type == 'object' || type == 'function');
-}
-
-var isObject_1 = isObject;
-
-/** `Object#toString` result references. */
-var asyncTag = '[object AsyncFunction]',
-    funcTag = '[object Function]',
-    genTag = '[object GeneratorFunction]',
-    proxyTag = '[object Proxy]';
-
-/**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a function, else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
-function isFunction(value) {
-  if (!isObject_1(value)) {
-    return false;
-  }
-  // The use of `Object#toString` avoids issues with the `typeof` operator
-  // in Safari 9 which returns 'object' for typed arrays and other constructors.
-  var tag = _baseGetTag(value);
-  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
-}
-
-var isFunction_1 = isFunction;
-
-/** Used to detect overreaching core-js shims. */
-var coreJsData = _root['__core-js_shared__'];
-
-var _coreJsData = coreJsData;
-
-/** Used to detect methods masquerading as native. */
-var maskSrcKey = (function() {
-  var uid = /[^.]+$/.exec(_coreJsData && _coreJsData.keys && _coreJsData.keys.IE_PROTO || '');
-  return uid ? ('Symbol(src)_1.' + uid) : '';
-}());
-
-/**
- * Checks if `func` has its source masked.
- *
- * @private
- * @param {Function} func The function to check.
- * @returns {boolean} Returns `true` if `func` is masked, else `false`.
- */
-function isMasked(func) {
-  return !!maskSrcKey && (maskSrcKey in func);
-}
-
-var _isMasked = isMasked;
-
-/** Used for built-in method references. */
-var funcProto$1 = Function.prototype;
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString$1 = funcProto$1.toString;
-
-/**
- * Converts `func` to its source code.
- *
- * @private
- * @param {Function} func The function to convert.
- * @returns {string} Returns the source code.
- */
-function toSource(func) {
-  if (func != null) {
-    try {
-      return funcToString$1.call(func);
-    } catch (e) {}
-    try {
-      return (func + '');
-    } catch (e) {}
-  }
-  return '';
-}
-
-var _toSource = toSource;
-
-/**
- * Used to match `RegExp`
- * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
- */
-var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
-
-/** Used to detect host constructors (Safari). */
-var reIsHostCtor = /^\[object .+?Constructor\]$/;
-
-/** Used for built-in method references. */
-var funcProto = Function.prototype,
-    objectProto$1 = Object.prototype;
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString = funcProto.toString;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
-
-/** Used to detect if a method is native. */
-var reIsNative = RegExp('^' +
-  funcToString.call(hasOwnProperty$1).replace(reRegExpChar, '\\$&')
-  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
-);
+};
 
-/**
- * The base implementation of `_.isNative` without bad shim checks.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a native function,
- *  else `false`.
- */
-function baseIsNative(value) {
-  if (!isObject_1(value) || _isMasked(value)) {
-    return false;
+const signMultiPdfFile = async ({
+  filename,
+  url,
+  signatureList
+}) => {
+  const response = await window.fetch(url);
+  const pdfBytes = await response.arrayBuffer();
+  const pdfDoc = await PDFDocument.load(pdfBytes);
+  for (let item of signatureList) {
+    const {
+      x,
+      y,
+      page,
+      signature,
+      width,
+      height
+    } = item;
+    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
+    });
   }
-  var pattern = isFunction_1(value) ? reIsNative : reIsHostCtor;
-  return pattern.test(_toSource(value));
-}
-
-var _baseIsNative = baseIsNative;
-
-/**
- * Gets the value at `key` of `object`.
- *
- * @private
- * @param {Object} [object] The object to query.
- * @param {string} key The key of the property to get.
- * @returns {*} Returns the property value.
- */
-function getValue(object, key) {
-  return object == null ? undefined : object[key];
-}
-
-var _getValue = getValue;
-
-/**
- * Gets the native function at `key` of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {string} key The key of the method to get.
- * @returns {*} Returns the function if it's native, else `undefined`.
- */
-function getNative(object, key) {
-  var value = _getValue(object, key);
-  return _baseIsNative(value) ? value : undefined;
-}
-
-var _getNative = getNative;
-
-/* Built-in method references that are verified to be native. */
-var Map = _getNative(_root, 'Map');
-
-var _Map = Map;
-
-/* Built-in method references that are verified to be native. */
-_getNative(Object, 'create');
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return value != null && typeof value == 'object';
-}
-
-var isObjectLike_1 = isObjectLike;
-
-/** `Object#toString` result references. */
-var argsTag = '[object Arguments]';
-
-/**
- * The base implementation of `_.isArguments`.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an `arguments` object,
- */
-function baseIsArguments(value) {
-  return isObjectLike_1(value) && _baseGetTag(value) == argsTag;
-}
-
-var _baseIsArguments = baseIsArguments;
-
-/** Used for built-in method references. */
-var objectProto = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/** Built-in value references. */
-var propertyIsEnumerable = objectProto.propertyIsEnumerable;
-
-/**
- * Checks if `value` is likely an `arguments` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an `arguments` object,
- *  else `false`.
- * @example
- *
- * _.isArguments(function() { return arguments; }());
- * // => true
- *
- * _.isArguments([1, 2, 3]);
- * // => false
- */
-_baseIsArguments(function() { return arguments; }()) ? _baseIsArguments : function(value) {
-  return isObjectLike_1(value) && hasOwnProperty.call(value, 'callee') &&
-    !propertyIsEnumerable.call(value, 'callee');
+  const modifiedPdfBytes = await pdfDoc.save();
+  return new window.File([modifiedPdfBytes], filename, {
+    type: 'application/pdf'
+  });
 };
-
-/**
- * This method returns `false`.
- *
- * @static
- * @memberOf _
- * @since 4.13.0
- * @category Util
- * @returns {boolean} Returns `false`.
- * @example
- *
- * _.times(2, _.stubFalse);
- * // => [false, false]
- */
-function stubFalse() {
-  return false;
-}
-
-var stubFalse_1 = stubFalse;
-
-createCommonjsModule(function (module, exports) {
-/** Detect free variable `exports`. */
-var freeExports = exports && !exports.nodeType && exports;
-
-/** Detect free variable `module`. */
-var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
-
-/** Detect the popular CommonJS extension `module.exports`. */
-var moduleExports = freeModule && freeModule.exports === freeExports;
-
-/** Built-in value references. */
-var Buffer = moduleExports ? _root.Buffer : undefined;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined;
-
-/**
- * Checks if `value` is a buffer.
- *
- * @static
- * @memberOf _
- * @since 4.3.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
- * @example
- *
- * _.isBuffer(new Buffer(2));
- * // => true
- *
- * _.isBuffer(new Uint8Array(2));
- * // => false
- */
-var isBuffer = nativeIsBuffer || stubFalse_1;
-
-module.exports = isBuffer;
-});
-
-createCommonjsModule(function (module, exports) {
-/** Detect free variable `exports`. */
-var freeExports = exports && !exports.nodeType && exports;
-
-/** Detect free variable `module`. */
-var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
-
-/** Detect the popular CommonJS extension `module.exports`. */
-var moduleExports = freeModule && freeModule.exports === freeExports;
-
-/** Detect free variable `process` from Node.js. */
-var freeProcess = moduleExports && _freeGlobal.process;
-
-/** Used to access faster Node.js helpers. */
-var nodeUtil = (function() {
-  try {
-    // Use `util.types` for Node.js 10+.
-    var types = freeModule && freeModule.require && freeModule.require('util').types;
-
-    if (types) {
-      return types;
-    }
-
-    // Legacy `process.binding('util')` for Node.js < 10.
-    return freeProcess && freeProcess.binding && freeProcess.binding('util');
-  } catch (e) {}
-}());
-
-module.exports = nodeUtil;
-});
-
-/* Built-in method references that are verified to be native. */
-var DataView = _getNative(_root, 'DataView');
-
-var _DataView = DataView;
-
-/* Built-in method references that are verified to be native. */
-var Promise$1 = _getNative(_root, 'Promise');
-
-var _Promise = Promise$1;
-
-/* Built-in method references that are verified to be native. */
-var Set = _getNative(_root, 'Set');
-
-var _Set = Set;
-
-/* Built-in method references that are verified to be native. */
-var WeakMap = _getNative(_root, 'WeakMap');
-
-var _WeakMap = WeakMap;
-
-/** `Object#toString` result references. */
-var mapTag = '[object Map]',
-    objectTag = '[object Object]',
-    promiseTag = '[object Promise]',
-    setTag = '[object Set]',
-    weakMapTag = '[object WeakMap]';
-
-var dataViewTag = '[object DataView]';
-
-/** Used to detect maps, sets, and weakmaps. */
-var dataViewCtorString = _toSource(_DataView),
-    mapCtorString = _toSource(_Map),
-    promiseCtorString = _toSource(_Promise),
-    setCtorString = _toSource(_Set),
-    weakMapCtorString = _toSource(_WeakMap);
-
-/**
- * Gets the `toStringTag` of `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-var getTag = _baseGetTag;
-
-// Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
-if ((_DataView && getTag(new _DataView(new ArrayBuffer(1))) != dataViewTag) ||
-    (_Map && getTag(new _Map) != mapTag) ||
-    (_Promise && getTag(_Promise.resolve()) != promiseTag) ||
-    (_Set && getTag(new _Set) != setTag) ||
-    (_WeakMap && getTag(new _WeakMap) != weakMapTag)) {
-  getTag = function(value) {
-    var result = _baseGetTag(value),
-        Ctor = result == objectTag ? value.constructor : undefined,
-        ctorString = Ctor ? _toSource(Ctor) : '';
-
-    if (ctorString) {
-      switch (ctorString) {
-        case dataViewCtorString: return dataViewTag;
-        case mapCtorString: return mapTag;
-        case promiseCtorString: return promiseTag;
-        case setCtorString: return setTag;
-        case weakMapCtorString: return weakMapTag;
-      }
-    }
-    return result;
-  };
-}
-
 const signPdfFile = async pdfSignature => {
   const {
     x,
@@ -854,25 +456,43 @@ const signPdfFile = async pdfSignature => {
     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'
+  return signMultiPdfFile({
+    filename,
+    url,
+    signatureList: [{
+      x,
+      y,
+      page,
+      signature,
+      width,
+      height
+    }]
   });
 };
 
-const _excluded$1 = ["placeholder", "signature", "url", "width", "height", "padding", "filename", "defaultLocation", "onChange"];
+const computedPDFSignLocation = ({
+  size,
+  location
+}) => {
+  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);
+  return {
+    scaleX,
+    scaleY,
+    pdfX,
+    pdfY,
+    width: signWidth,
+    height: signHeight,
+    x: pdfX,
+    y: pdfY - signHeight
+  };
+};
+
+const _excluded$2 = ["placeholder", "signature", "url", "width", "height", "padding", "filename", "defaultLocation", "onChange"];
 const PDFSignInner = /*#__PURE__*/forwardRef(({
   size,
   currentPage,
@@ -887,42 +507,29 @@ const PDFSignInner = /*#__PURE__*/forwardRef(({
   onChange
 }, ref) => {
   const initLocation = useMemo(() => {
-    return {
-      scaleX: 1,
-      scaleY: 1,
-      x: Math.round((size.width - _width) / 2),
-      y: Math.round((size.height - _height) / 2),
-      size: {
-        width: _width,
-        height: _height,
-        x: Math.round((size.width - _width) / 2),
-        y: Math.round((size.height - _height) / 2)
-      }
-    };
+    return getInitLocation({
+      stageWidth: size.width,
+      stageHeight: size.height,
+      width: _width,
+      height: _height
+    });
   }, [size, _width, _height]);
   const [location, setLocationOrigin] = useState(Object.assign({}, initLocation, defaultLocation));
   const setLocation = useRefCallback(value => {
     setLocationOrigin(Object.assign({}, initLocation, value));
   });
   const pdfSignature = useMemo(() => {
-    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);
-    return {
-      x: pdfX,
-      y: pdfY - signHeight,
-      page: currentPage,
-      pageWidth: Math.round(size.originalWidth),
-      pageHeight: Math.round(size.originalHeight),
-      width: signWidth,
-      height: signHeight,
+    return Object.assign({}, computedPDFSignLocation({
+      location,
+      size
+    }), {
       signature,
       url,
-      filename: _filename
-    };
+      filename: _filename,
+      page: currentPage,
+      pageWidth: Math.round(size.originalWidth),
+      pageHeight: Math.round(size.originalHeight)
+    });
   }, [location, signature, url, _filename, size, currentPage]);
   const signPdf = useCallback(async () => {
     return await signPdfFile(pdfSignature);
@@ -964,7 +571,7 @@ const PDFSign = withLocale(/*#__PURE__*/forwardRef((_ref, ref) => {
       defaultLocation,
       onChange
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return /*#__PURE__*/jsx(PDFViewer, _extends({}, props, {
     url: url,
     children: ({
@@ -989,6 +596,131 @@ const PDFSign = withLocale(/*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 }));
 
+const _excluded$1 = ["placeholder", "url", "width", "height", "padding", "filename", "defaultSignatureList", "onSign", "onChange", "isEdit"];
+const PDFSignMultiInner = /*#__PURE__*/forwardRef(({
+  size,
+  currentPage,
+  placeholder,
+  url,
+  width: _width = 200,
+  height: _height = 80,
+  padding,
+  filename: _filename = 'signed-document.pdf',
+  defaultSignatureList,
+  isEdit,
+  onSign,
+  onChange
+}, ref) => {
+  const [signatureList, setSignatureList] = useState(defaultSignatureList || []);
+  const {
+    formatMessage
+  } = useIntl();
+  const pdfSignatureList = useMemo(() => {
+    return signatureList.filter(location => location.signature).map(location => {
+      return Object.assign({}, computedPDFSignLocation({
+        location,
+        size
+      }), {
+        page: location.page,
+        signature: location.signature
+      });
+    });
+  }, [signatureList, size]);
+  useImperativeHandle(ref, () => ({
+    getSignatureList: () => signatureList,
+    setSignatureList: value => setSignatureList(value),
+    getPdfSignatureList: () => {
+      return pdfSignatureList;
+    },
+    sign: () => {
+      if (!pdfSignatureList.length) {
+        return Promise.reject(new Error(formatMessage({
+          id: 'signatureAdd'
+        })));
+      }
+      return signMultiPdfFile({
+        url,
+        filename: _filename,
+        signatureList: pdfSignatureList
+      });
+    },
+    addSignLocation: () => {
+      setSignatureList(signatureList => {
+        return [...signatureList, {
+          page: currentPage
+        }];
+      });
+    }
+  }));
+  return /*#__PURE__*/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: ({
+      index,
+      value
+    }) => {
+      onSign && onSign({
+        size: value.size,
+        callback: signature => {
+          setSignatureList(value => {
+            const newValue = value.slice(0);
+            newValue[index] = Object.assign({}, newValue[index], {
+              signature
+            });
+            return newValue;
+          });
+        }
+      });
+    }
+  });
+});
+const PDFSignMulti = withLocale(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      placeholder,
+      url,
+      width,
+      height,
+      padding,
+      filename = 'signed-document.pdf',
+      defaultSignatureList,
+      onSign,
+      onChange,
+      isEdit
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return /*#__PURE__*/jsx(PDFViewer, _extends({}, props, {
+    url: url,
+    children: ({
+      size,
+      currentPage
+    }) => {
+      return /*#__PURE__*/jsx(PDFSignMultiInner, {
+        ref: ref,
+        size: size,
+        currentPage: currentPage,
+        url: url,
+        filename: filename,
+        defaultSignatureList: defaultSignatureList,
+        width: width,
+        height: height,
+        padding: padding,
+        placeholder: placeholder,
+        onChange: onChange,
+        onSign: onSign,
+        isEdit: isEdit
+      });
+    }
+  }));
+}));
+
 const _excluded = ["filename", "onSuccess", "width", "height", "mask"];
 const dataURLtoBlob = dataURL => {
   let arr = dataURL.split(',');
@@ -1021,6 +753,7 @@ const Signature = withLocale(({
   } = App.useApp();
   const signatureCanvasRef = useRef(null);
   const maskRef = useRef(null);
+  const [loading, setLoading] = useState(false);
   return /*#__PURE__*/jsxs(Flex, {
     vertical: true,
     gap: 12,
@@ -1028,7 +761,7 @@ const Signature = withLocale(({
     children: [/*#__PURE__*/jsxs("div", {
       className: classnames(style['signature-container'], 'signature-container'),
       style: {
-        width: '368px',
+        width: '100%',
         height: `${Math.round(height * 368 / width)}px`
       },
       children: [/*#__PURE__*/jsx("div", {
@@ -1047,43 +780,54 @@ const Signature = withLocale(({
       gap: 10,
       children: [/*#__PURE__*/jsx(Button, {
         onClick: () => {
-          onClose();
+          signatureCanvasRef.current.clear();
         },
         children: formatMessage({
-          id: 'signatureCancelText'
+          id: 'signatureCleanText'
         })
       }), /*#__PURE__*/jsx(Button, {
+        loading: loading,
         type: "primary",
         onClick: async () => {
-          if (signatureCanvasRef.current.isEmpty()) {
-            message.error(formatMessage({
-              id: 'signatureEmptyError'
-            }));
-            return;
-          }
-          let result = signatureCanvasRef.current.toDataURL('image/png');
-          if (_mask) {
-            const maskPng = await snapdom.toPng(maskRef.current, {
-              scale: 2
+          setLoading(true);
+          try {
+            if (signatureCanvasRef.current.isEmpty()) {
+              message.error(formatMessage({
+                id: 'signatureEmptyError'
+              }));
+              return;
+            }
+            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'
             });
-            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 successResult = onSuccess && (await onSuccess(file));
+            setLoading(false);
+            if (successResult === false) {
+              return;
+            }
+            onClose();
+          } catch (e) {
+            message.error(e.message);
+            setLoading(false);
           }
-          const file = new window.File([dataURLtoBlob(result)], filename, {
-            type: 'image/png'
-          });
-          onClose();
-          onSuccess(file);
         },
         children: formatMessage({
           id: 'signatureConfirmText'
@@ -1120,6 +864,7 @@ const useSignature = () => {
       title: /*#__PURE__*/jsx(Title, {}),
       icon: null,
       footer: null,
+      closable: true,
       wrapClassName: style['signature-modal'],
       classNames: {
         content: style['signature-modal']
@@ -1140,5 +885,5 @@ const useSignature = () => {
   };
 };
 
-export { LocationLayer, PDFSign, PDFViewer, PDFSign as default, useSignature };
+export { LocationGroup, LocationLayer, PDFSign, PDFSignMulti, PDFViewer, PDFSign as default, signPdfFile, useSignature };
 //# sourceMappingURL=index.modern.js.map