@kne/react-pdf-sign 1.1.6 → 1.1.7

package/dist/index.js

@@ -13,6 +13,7 @@ var useControlValue = require('@kne/use-control-value');
 var useRefCallback = require('@kne/use-ref-callback');
 var useImage = require('use-image');
 var reactIntl = require('@kne/react-intl');
+var img = require('./img~cOOFcooA.png');
 var pdfLib = require('pdf-lib');
 var SignatureCanvas = require('react-signature-canvas');
 var snapdom = require('@zumer/snapdom');
@@ -24,6 +25,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var useControlValue__default = /*#__PURE__*/_interopDefaultLegacy(useControlValue);
 var useRefCallback__default = /*#__PURE__*/_interopDefaultLegacy(useRefCallback);
 var useImage__default = /*#__PURE__*/_interopDefaultLegacy(useImage);
+var img__default = /*#__PURE__*/_interopDefaultLegacy(img);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
 function _extends() {
@@ -247,12 +249,15 @@ const LocationLayerInner = withLocale(p => {
       onClick
     } = p,
     props = _objectWithoutPropertiesLoose(p, _excluded$3);
+  const [textWidth, setTextWidth] = react.useState(0);
   const [value, setValue] = useControlValue__default["default"](props);
   const [isInit, setIsInit] = react.useState(false);
   const [signatureImage] = useImage__default["default"](signature);
+  const [iconImage] = useImage__default["default"](img__default["default"]);
   const groupRef = react.useRef();
   const signRef = react.useRef();
   const transformerRef = react.useRef();
+  const textRef = react.useRef();
   const computedSignLocation = () => {
     const absolutePosition = signRef.current.absolutePosition();
     const size = signRef.current.getClientRect();
@@ -296,11 +301,29 @@ const LocationLayerInner = withLocale(p => {
       transformerRef.current.nodes([groupRef.current]);
     }
   }, [isInit]);
+  react.useEffect(() => {
+    if (isInit && textRef.current) {
+      setTextWidth(textRef.current.width());
+    }
+  }, [isInit, placeholder]);
   if (!(isInit && value)) {
     return null;
   }
+  const textX = value.x + width * value.scaleX / 2 - textWidth / 2;
+  const textY = value.y + height * value.scaleY / 2 - 8;
   return /*#__PURE__*/jsxRuntime.jsxs(reactKonva.Layer, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(reactKonva.Group, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(reactKonva.Rect, {
+      x: value.x,
+      y: value.y,
+      width: width * value.scaleX,
+      height: height * value.scaleY,
+      stroke: themeColor,
+      strokeWidth: 1,
+      dashEnabled: true,
+      cornerRadius: 8,
+      ref: signRef,
+      dash: [5, 5]
+    }), /*#__PURE__*/jsxRuntime.jsx(reactKonva.Group, {
       x: value.x,
       y: value.y,
       draggable: active !== false,
@@ -322,22 +345,25 @@ const LocationLayerInner = withLocale(p => {
       }) : /*#__PURE__*/jsxRuntime.jsx(reactKonva.Rect, {
         width: width,
         height: height,
-        fill: "#f0f0f0",
-        cornerRadius: 8,
         ref: signRef
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(reactKonva.Text, {
+    }), !signatureImage ? /*#__PURE__*/jsxRuntime.jsx(reactKonva.Image, {
+      x: textX - 24,
+      y: textY,
+      width: 16,
+      height: 16,
+      image: iconImage
+    }) : null, /*#__PURE__*/jsxRuntime.jsx(reactKonva.Text, {
+      ref: textRef,
       listening: false,
-      x: value.x,
-      y: value.y,
+      x: textX,
+      y: textY,
       text: signatureImage ? '' : placeholder,
       fontSize: 16,
-      fill: "#666666",
+      fill: themeColor,
       fontFamily: "Arial",
       align: "center",
-      verticalAlign: "middle",
-      width: width * value.scaleX,
-      height: height * value.scaleY
+      verticalAlign: "middle"
     }), /*#__PURE__*/jsxRuntime.jsx(reactKonva.Transformer, {
       ref: transformerRef,
       visible: active !== false,