Font size issue

.gitignore

@@ -20,7 +20,7 @@ public/webviewer
 .env.development.local
 .env.test.local
 .env.production.local
-package-lock.json
+# package-lock.json
 /public/assets/webviewer/core
 /public/assets/webviewer/ui
 

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "gestalt": "^145.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",

src/App.css

@@ -2,7 +2,6 @@
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
 }
 
 .App .header {
@@ -14,4 +13,8 @@
   font-size: 1.2em;
   line-height: 44px;
   color: white;
-}
+}
+
+.webviewer {
+  width: 70%
+}

src/App.js

@@ -1,45 +1,98 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useCallback, useState } from 'react';
 import WebViewer from '@pdftron/webviewer';
 import './App.css';
+import {
+  Box,
+  Button,
+} from 'gestalt';
+import { addSetupField } from './utils';
+
+const dragOver = (e) => {
+  e.preventDefault();
+  return false;
+};
 
 const App = () => {
   const viewer = useRef(null);
+  const [instance, setInstance] = useState(null);
 
-  // if using a class, equivalent of componentDidMount 
-  useEffect(() => {
-    // If you prefer to use the Iframe implementation, you can replace this line with: WebViewer.Iframe(...)
-    WebViewer.WebComponent(
-      {
-        path: '/webviewer/lib',
-        initialDoc: '/files/PDFTRON_about.pdf',
-        licenseKey: 'your_license_key',  // sign up to get a free trial key at https://dev.apryse.com
-      },
-      viewer.current,
-    ).then((instance) => {
-      const { documentViewer, annotationManager, Annotations } = instance.Core;
-
-      documentViewer.addEventListener('documentLoaded', () => {
-        const rectangleAnnot = new Annotations.RectangleAnnotation({
-          PageNumber: 1,
-          // values are in page coordinates with (0, 0) in the top left
-          X: 100,
-          Y: 150,
-          Width: 200,
-          Height: 50,
-          Author: annotationManager.getCurrentUser()
-        });
+  const drop = useCallback((e, instance) => {
+    const { documentViewer } = instance.Core;
+    const scrollElement = documentViewer.getScrollViewElement();
+    const scrollLeft = scrollElement.scrollLeft || 0;
+    const scrollTop = scrollElement.scrollTop || 0;
 
-        annotationManager.addAnnotation(rectangleAnnot);
-        // need to draw the annotation otherwise it won't show up until the page is refreshed
-        annotationManager.redrawAnnotation(rectangleAnnot);
-      });
+    addSetupField({
+      instance,
+      point:{ x: e.pageX + scrollLeft, y: e.pageY + scrollTop },
     });
+
+    return false;
   }, []);
 
+  useEffect(() => {
+    if(!instance) {
+      WebViewer(
+        {
+          path: '/webviewer/lib',
+          initialDoc: '/files/PDFTRON_about.pdf',
+          licenseKey: 'your_license_key',
+        },
+        viewer.current,
+      ).then((_instance) => {
+        setInstance(_instance);
+        const { iframeWindow } = _instance.UI;
+
+        const iframeDoc = iframeWindow.document.body;
+
+        iframeDoc.addEventListener('dragover', e => {
+          dragOver(e, _instance)
+        });
+        iframeDoc.addEventListener('drop', e => {
+          drop(e, _instance);
+        });
+      });
+    }
+  }, [drop, instance, setInstance]);
+
+  const dragStart = e => {
+    console.log('dragstart');
+    e.target.style.opacity = 0.5;
+    const copy = e.target.cloneNode(true);
+    copy.id = 'form-build-drag-image-copy';
+    copy.style.width = '250px';
+    document.body.appendChild(copy);
+    e.dataTransfer.setDragImage(copy, 125, 25);
+    e.dataTransfer.setData('text', '');
+  };
+
+  const dragEnd = (e) => {
+    console.log('dragend');
+    e.target.style.opacity = 1;
+    document.body.removeChild(
+      document.getElementById('form-build-drag-image-copy'),
+    );
+    e.preventDefault();
+  };
+
   return (
     <div className="App">
-      <div className="header">React sample</div>
       <div className="webviewer" ref={viewer}></div>
+      <div>
+        <Box padding={2}>
+          <div
+            draggable
+            onDragStart={e => dragStart(e)}
+            onDragEnd={e => dragEnd(e)}
+          >
+            <Button
+              accessibilityLabel="add signature"
+              text="Add signature"
+              iconEnd="compose"
+            />
+          </div>
+        </Box>
+      </div>
     </div>
   );
 };

src/utils.js

@@ -0,0 +1,168 @@
+const ESIGN_REQUIRED_FIELD_COLOR = "#FD3C3C";
+
+const ESIGN_DEFAULT_DATE_FORMAT = "mmm dd, yyyy";
+
+const ESIGN_FONT_STYLES = {
+  LIGHT: "light",
+  REGULAR: "normal",
+  BOLD: "bold",
+  ITALIC: "italic"
+};
+
+const ESIGN_DEFAULT_FONT_STYLE = ESIGN_FONT_STYLES.REGULAR;
+
+const ESIGN_DEFAULT_FONT_SIZE = 14;
+
+const ESIGN_DEFAULT_FONT_NAME = "sans-serif";
+
+const FIELD_TYPES = {
+  SIGNATURE: "SIGNATURE",
+};
+
+const TOOLS = {
+  signature: {
+      id: "signature",
+      label: "signature",
+      type: FIELD_TYPES.SIGNATURE,
+      sizeType: FIELD_TYPES.SIGNATURE,
+      enabled: true,
+      height: {
+          default: 64,
+          min: 48,
+          max: 88
+      },
+      width: {
+          default: 160,
+          min: 87,
+          max: 200
+      }
+  },
+};
+
+const ESIGN_NAMESPACE = "egnyteESign";
+
+function getRichStyleForAnnotation(style) {
+  // regular
+  const richStyle = {
+      "font-style": "normal",
+      "font-weight": "normal"
+  };
+
+  if (style === ESIGN_FONT_STYLES.BOLD) {
+      richStyle["font-weight"] = "bold";
+  } else if (style === ESIGN_FONT_STYLES.ITALIC) {
+      richStyle["font-style"] = "italic";
+  } else if (style === ESIGN_FONT_STYLES.LIGHT) {
+      richStyle["font-weight"] = "300";
+  }
+
+  return richStyle;
+}
+
+const eSignerBlue = "rgba(96, 122, 184, 1)";
+const eSignerBlueBg = "rgba(96, 122, 184, 0.1)";
+
+const parseToRgbA = color =>
+  color
+      .replace("rgb(", "")
+      .replace("rgba(", "")
+      .replace(")", "")
+      .split(",")
+      .map(c => parseFloat(c));
+
+
+export async function addSetupField({
+  tool = TOOLS.signature,
+  instance,
+  point = {},
+  flag = {},
+  fontName = ESIGN_DEFAULT_FONT_NAME,
+  fontSize = ESIGN_DEFAULT_FONT_SIZE,
+  fontStyle = ESIGN_DEFAULT_FONT_STYLE,
+}) {
+  const fillColor = parseToRgbA(eSignerBlueBg) ?? [0, 0, 0, 0];
+  const textColor = parseToRgbA(eSignerBlue) ?? [0, 0, 0, 1];
+  const uniqueId = `${ESIGN_NAMESPACE}:${tool.id}:${Date.now()}`;
+  const required = true;
+  const custom = {
+      ...tool,
+      id: uniqueId,
+      name: uniqueId,
+      displayName: "test",
+      email: "abc@abc.com",
+      placeholderName: "test",
+      dateFormat: ESIGN_DEFAULT_DATE_FORMAT,
+      required,
+      fontName,
+      fontSize,
+      fontStyle,
+      options: [],
+      defaultOption: "",
+      isSetupField: true,
+      isPlaceholder: false
+  };
+
+  const { documentViewer, annotationManager, Annotations } = instance.Core;
+
+  annotationManager.disableReadOnlyMode();
+
+  const doc = documentViewer.getDocument();
+  const displayMode = documentViewer.getDisplayModeManager().getDisplayMode();
+  const page = displayMode.getSelectedPages(point, point);
+  const zoom = documentViewer.getZoomLevel();
+
+  if (!!point.x && page.first === null) {
+      return;
+  }
+
+  const pageIdx = page.first !== null ? page.first : documentViewer.getCurrentPage();
+  const pageInfo = doc.getPageInfo(pageIdx);
+  const pagePoint = displayMode.windowToPage(point, pageIdx);
+
+  const textAnnot = new Annotations.FreeTextAnnotation(Annotations.FreeTextAnnotation.Intent.FreeText);
+
+
+  textAnnot.PageNumber = pageIdx;
+  textAnnot.Height =  tool.height.default;
+  textAnnot.Width =  tool.width.default;
+  textAnnot.IsHoverable = true;
+
+  textAnnot.X = (pagePoint.x || pageInfo.width / 2) - textAnnot.Width / 2;
+  textAnnot.Y = (pagePoint.y || pageInfo.height / 2) - textAnnot.Height / 2;
+
+  textAnnot.setPadding(new Annotations.Rect(0, 0, 0, 0));
+  textAnnot.custom = { flag, ...custom };
+
+  // set the type of annot
+  textAnnot.setContents(textAnnot.custom.displayName);
+  textAnnot.FontSize = `${fontSize / zoom}px`;
+  textAnnot.FontName = fontName;
+  textAnnot.FillColor = new Annotations.Color(...fillColor);
+  textAnnot.TextColor = new Annotations.Color(...textColor);
+  textAnnot.StrokeThickness = 4;
+  textAnnot.StrokeColor = new Annotations.Color(...fillColor);
+  textAnnot.TextAlign = "left";
+  textAnnot.TextVerticalAlign = "left";
+  textAnnot.NoRotate = true;
+  textAnnot.RotationControlEnabled = false;
+  textAnnot.Author = annotationManager.getCurrentUser();
+  textAnnot.disableRotationControl();
+  await annotationManager.addAnnotation(textAnnot);
+  await annotationManager.redrawAnnotation(textAnnot);
+
+  textAnnot.setRichTextStyle({
+      0: {
+          color: required ? ESIGN_REQUIRED_FIELD_COLOR : textAnnot.TextColor.toHexString()
+      },
+      1: {
+          color: textAnnot.TextColor.toHexString()
+      }
+  });
+
+  const richStyle = getRichStyleForAnnotation(fontStyle);
+
+  textAnnot.updateRichTextStyle(richStyle);
+
+  annotationManager.deselectAllAnnotations();
+  annotationManager.selectAnnotation(textAnnot);
+}