@kne/react-pdf-sign 1.0.1 → 1.0.3

package/README.md

@@ -73,24 +73,26 @@ 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));
-              }
-            });
-          }}>
-          添加签名
-        </Button>
+        {pdfFile && (
+          <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));
+                }
+              });
+            }}>
+            添加签名
+          </Button>
+        )}
         {pdfFile && sign && (
           <Button
             onClick={async () => {
@@ -187,15 +189,15 @@ const BaseExample = () => {
             onClick={() => {
               ref.current.setLocation({
                 size: {
-                  width: 200,
-                  height: 50,
-                  x: 240,
-                  y: 47
+                  width: 390,
+                  height: 156,
+                  x: 163,
+                  y: 8
                 },
-                scaleX: 1,
-                scaleY: 1,
-                x: 240,
-                y: 47
+                scaleX: 1.95,
+                scaleY: 1.95,
+                x: 163,
+                y: 8
               });
             }}>
             设置签名位置

package/dist/index.js

@@ -199,7 +199,6 @@ 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();
@@ -211,8 +210,8 @@ const LocationLayer = withLocale(p => {
         x: Math.round(absolutePosition.x),
         y: Math.round(absolutePosition.y)
       },
-      scaleX: Number(transformerRef.current.attrs.scaleX.toFixed(2)),
-      scaleY: Number(transformerRef.current.attrs.scaleY.toFixed(2)),
+      scaleX: Number(groupRef.current.attrs.scaleX.toFixed(2)),
+      scaleY: Number(groupRef.current.attrs.scaleY.toFixed(2)),
       x: Math.round(groupRef.current.attrs.x),
       y: Math.round(groupRef.current.attrs.y)
     });
@@ -231,8 +230,8 @@ const LocationLayer = withLocale(p => {
           y: Math.round((stageHeight - height) / 2)
         }
       });
-      setIsInit(true);
     }
+    setIsInit(true);
   });
   const themeColor = react.useMemo(() => {
     const el = document.createElement('div');
@@ -247,7 +246,7 @@ const LocationLayer = withLocale(p => {
   }, []);
   react.useEffect(() => {
     if (isInit) {
-      transformerRef.current.nodes([targetRef.current]);
+      transformerRef.current.nodes([groupRef.current]);
     }
   }, [isInit]);
   if (!(isInit && value)) {
@@ -263,22 +262,21 @@ const LocationLayer = withLocale(p => {
         draggable: true,
         ref: groupRef,
         onDragEnd: computedSignLocation,
-        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
-          })
+        scaleX: value.scaleX,
+        scaleY: value.scaleY,
+        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,
@@ -290,9 +288,6 @@ const LocationLayer = withLocale(p => {
           height: height
         })]
       }), /*#__PURE__*/jsxRuntime.jsx(reactKonva.Transformer, {
-        scaleX: value.scaleX,
-        scaleY: value.scaleY,
-        centeredScaling: true,
         ref: transformerRef,
         keepRatio: true,
         flipEnabled: false,