ApryseSDK · hello2parth · Nov 6, 2023 · Nov 6, 2023 · Nov 8, 2023 · Nov 18, 2023
diff --git a/.gitignore b/.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
 

diff --git a/README.md b/README.md
@@ -29,6 +29,8 @@ WebViewer comes with a 7-day trial without any feature limitations or trial key
 
 Before you begin, make sure your development environment includes [Node.js](https://nodejs.org/en/).
 
+This sample requires Node version 18.0.0 or higher. To check your version, run `node -v` in a terminal/console window.
+
 ## Install
 
 ```

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,35 +2,43 @@
   "name": "webviewer-react-sample",
   "version": "1.0.0",
   "private": true,
-  "homepage": "https://pdftron.github.io/webviewer-react-sample",
   "dependencies": {
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0",
-    "react-scripts": "2.1.1",
-    "@pdftron/webviewer": "^10.0.0"
-  },
-  "devDependencies": {
-    "btoa": "^1.2.1",
-    "download": "^7.1.0",
-    "fs-extra": "^7.0.1",
-    "gh-pages": "^3.2.2"
+    "@pdftron/webviewer": "^10.0.0",
+    "@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",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "postinstall": "node tools/copy-webviewer-files.js",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "postinstall": "node tools/copy-webviewer-files.js"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
-}
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+  }
+}
diff --git a/public/assets/favicon.ico b/public/assets/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/assets/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -19,14 +21,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React Sample</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
+  <title>React Sample</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -36,5 +37,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -6,6 +6,16 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/public/serve.json b/public/serve.json
diff --git a/src/App.css b/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%
+}
diff --git a/src/App.js b/src/App.js
@@ -1,44 +1,165 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
 import WebViewer from '@pdftron/webviewer';
 import './App.css';
+import {
+  Box,
+  Button,
+} from 'gestalt';
+
+
 
 const App = () => {
+  let isOverlapping = false;
   const viewer = useRef(null);
 
-  // if using a class, equivalent of componentDidMount 
+  const addField = useCallback((type, point = {}, instance, name = '', value = '', flag = {},) => {
+    const { documentViewer, Annotations } = instance.Core;
+    const annotationManager = documentViewer.getAnnotationManager();
+    const doc = documentViewer.getDocument();
+    const displayMode = documentViewer.getDisplayModeManager().getDisplayMode();
+    const page = displayMode.getSelectedPages(point, point);
+    if (!!point.x && page.first == null) {
+      return; //don't add field to an invalid page location
+    }
+    const page_idx =
+      page.first !== null ? page.first : documentViewer.getCurrentPage();
+    const page_info = doc.getPageInfo(page_idx);
+    const page_point = displayMode.windowToPage(point, page_idx);
+    const zoom = documentViewer.getZoomLevel();
+
+    var textAnnot = new Annotations.FreeTextAnnotation();
+    textAnnot.PageNumber = page_idx;
+    const rotation = documentViewer.getCompleteRotation(page_idx) * 90;
+    textAnnot.Rotation = rotation;
+    if (rotation === 270 || rotation === 90) {
+      textAnnot.Width = 50.0 / zoom;
+      textAnnot.Height = 250.0 / zoom;
+    } else {
+      textAnnot.Width = 250.0 / zoom;
+      textAnnot.Height = 50.0 / zoom;
+    }
+    textAnnot.X = (page_point.x || page_info.width / 2) - textAnnot.Width / 2;
+    textAnnot.Y = (page_point.y || page_info.height / 2) - textAnnot.Height / 2;
+
+    textAnnot.setPadding(new Annotations.Rect(0, 0, 0, 0));
+    textAnnot.custom = {
+      type,
+      value,
+      flag,
+      name: `${"test"}_${type}_`,
+    };
+
+    // set the type of annot
+    textAnnot.setContents(textAnnot.custom.name);
+    textAnnot.FontSize = '' + 20.0 / zoom + 'px';
+    textAnnot.FillColor = new Annotations.Color(211, 211, 211, 0.5);
+    textAnnot.TextColor = new Annotations.Color(0, 165, 228);
+    textAnnot.StrokeThickness = 1;
+    textAnnot.StrokeColor = new Annotations.Color(0, 165, 228);
+    textAnnot.TextAlign = 'center';
+
+    textAnnot.Author = annotationManager.getCurrentUser();
+
+    annotationManager.deselectAllAnnotations();
+    annotationManager.addAnnotation(textAnnot, true);
+    annotationManager.redrawAnnotation(textAnnot);
+    annotationManager.selectAnnotation(textAnnot);
+  }, []);
+
+  const dragOver = (e, _instance) => {
+    console.log('dragover');
+    const { annotationManager } = _instance.Core;
+    const annotation = annotationManager.getAnnotationByMouseEvent(e);
+    isOverlapping = false;
+    if (annotation) {
+      console.log(annotation);
+      isOverlapping = true;
+    }
+    e.preventDefault();
+    return false;
+  };
+
+  const drop = useCallback((e, instance) => {
+    console.log('drop');
+    const { documentViewer } = instance.Core;
+    const scrollElement = documentViewer.getScrollViewElement();
+    const scrollLeft = scrollElement.scrollLeft || 0;
+    const scrollTop = scrollElement.scrollTop || 0;
+
+    console.log(isOverlapping);
+    if (!isOverlapping) {
+      addField('SIGNATURE', { x: e.pageX + scrollLeft, y: e.pageY + scrollTop }, instance);
+    }
+
+    return false;
+  }, [addField]);
+
   useEffect(() => {
     WebViewer(
       {
         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
+        licenseKey: 'your_license_key',
       },
       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()
-        });
-
-        annotationManager.addAnnotation(rectangleAnnot);
-        // need to draw the annotation otherwise it won't show up until the page is refreshed
-        annotationManager.redrawAnnotation(rectangleAnnot);
+    ).then((_instance) => {
+      const { iframeWindow } = _instance.UI;
+
+      const iframeDoc = iframeWindow.document.body;
+      iframeDoc.addEventListener('dragover', e => {
+        dragOver(e, _instance)
+      });
+      iframeDoc.addEventListener('drop', e => {
+        drop(e, _instance);
+      });
+
+    const { documentViewer, annotationManager } = _instance.Core;
+      documentViewer.addEventListener('mouseMove',(e)=>{
+        const annotUnderMouse = annotationManager.getAnnotationByMouseEvent(e);
+        // console.log({ annotUnderMouse });
       });
+
     });
-  }, []);
+  }, [drop]);
+
+  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>
   );
 };

diff --git a/src/App.test.js b/src/App.test.js
@@ -1,9 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
 import App from './App';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+test('renders react sample', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/react sample/i);
+  expect(linkElement).toBeInTheDocument();
 });
-Original file line number
+Diff line change
@@ Expand Up @@
     Before you begin, make sure your development environment includes [Node.js](https://nodejs.org/en/).
+    This sample requires Node version 18.0.0 or higher. To check your version, run `node -v` in a terminal/console window.
     ## Install
     ```
@@ Expand Down @@