Merge pull request #1149 from bcgov/dev-NK-FOIMOD-3466

make redline opacity configurable
bcgov · Sep 17, 2024 · c6dfcbd · c6dfcbd
2 parents e10a070 + e879fe0
commit c6dfcbd
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -18,6 +18,7 @@ services:
         - REACT_APP_REDACTION_SELECT_LIMIT=${REDACTION_SELECT_LIMIT}
         - REACT_APP_BIG_HTTP_GET_TIMEOUT=${BIG_HTTP_GET_TIMEOUT}
         - REACT_APP_SESSION_SECURITY_KEY=${REACT_APP_SESSION_SECURITY_KEY}
+        - REACT_APP_REDLINE_OPACITY=${REACT_APP_REDLINE_OPACITY}
     volumes:
       - ".:/web"
       - "/web/node_modules"

diff --git a/web/Dockerfile b/web/Dockerfile
@@ -15,6 +15,7 @@ ARG REACT_APP_ANNOTATION_PAGE_SIZE
 ARG REACT_APP_PAGE_SELECT_LIMIT
 ARG REACT_APP_REDACTION_SELECT_LIMIT
 ARG REACT_APP_SESSION_SECURITY_KEY
+ARG REACT_APP_REDLINE_OPACITY
 
 
 ENV NODE_ENV ${NODE_ENV}
@@ -27,6 +28,7 @@ ENV REACT_APP_ANNOTATION_PAGE_SIZE ${REACT_APP_ANNOTATION_PAGE_SIZE}
 ENV REACT_APP_PAGE_SELECT_LIMIT ${REACT_APP_PAGE_SELECT_LIMIT}
 ENV REACT_APP_REDACTION_SELECT_LIMIT ${REACT_APP_REDACTION_SELECT_LIMIT}
 ENV REACT_APP_SESSION_SECURITY_KEY ${REACT_APP_SESSION_SECURITY_KEY}
+ENV REACT_APP_REDLINE_OPACITY ${REACT_APP_REDLINE_OPACITY}
 
 # add `/app/node_modules/.bin` to $PATH
 ENV PATH /web/node_modules/.bin:$PATH

diff --git a/web/Dockerfile.local b/web/Dockerfile.local
@@ -17,6 +17,7 @@ ARG REACT_APP_PAGE_SELECT_LIMIT
 ARG REACT_APP_REDACTION_SELECT_LIMIT
 ARG REACT_APP_BIG_HTTP_GET_TIMEOUT
 ARG REACT_APP_SESSION_SECURITY_KEY
+ARG REACT_APP_REDLINE_OPACITY
 
 ENV NODE_ENV ${NODE_ENV}
 ENV GENERATE_SOURCEMAP ${GENERATE_SOURCEMAP}
@@ -29,6 +30,7 @@ ENV REACT_APP_PAGE_SELECT_LIMIT ${REACT_APP_PAGE_SELECT_LIMIT}
 ENV REACT_APP_REDACTION_SELECT_LIMIT ${REACT_APP_REDACTION_SELECT_LIMIT}
 ENV BIG_HTTP_GET_TIMEOUT ${REACT_APP_BIG_HTTP_GET_TIMEOUT}
 ENV REACT_APP_SESSION_SECURITY_KEY ${REACT_APP_SESSION_SECURITY_KEY}
+ENV REACT_APP_REDLINE_OPACITY ${REACT_APP_REDLINE_OPACITY}
 
 # add `/app/node_modules/.bin` to $PATH
 ENV PATH /web/node_modules/.bin:$PATH

diff --git a/web/src/components/FOI/Home/Redlining.js b/web/src/components/FOI/Home/Redlining.js
@@ -27,6 +27,7 @@ import {
   ANNOTATION_PAGE_SIZE,
   REDACTION_SELECT_LIMIT,
   BIG_HTTP_GET_TIMEOUT,
+  REDLINE_OPACITY,
 } from "../../../constants/constants";
 import { errorToast } from "../../../helper/helper";
 import { useAppSelector } from "../../../hooks/hook";
@@ -84,7 +85,7 @@ const Redlining = React.forwardRef(
     },
     ref
   ) => {
-    const alpha = 0.6;
+    const alpha = REDLINE_OPACITY;
 
     const requestnumber = useAppSelector(
       (state) => state.documents?.requestnumber
@@ -193,6 +194,7 @@ const Redlining = React.forwardRef(
           } = instance.Core;
           instance.UI.disableElements(PDFVIEWER_DISABLED_FEATURES.split(","));
           instance.UI.enableElements(["attachmentPanelButton"]);
+          instance.UI.enableNoteSubmissionWithEnter();
           documentViewer.setToolMode(
             documentViewer.getTool(instance.Core.Tools.ToolNames.REDACTION)
           );
@@ -1336,6 +1338,40 @@ const Redlining = React.forwardRef(
       if (docInstance && documentList.length > 0) {
         const document = docInstance?.UI.iframeWindow.document;
         document.getElementById("create_response_pdf").addEventListener("click", handleCreateResponsePDFClick);
+        docViewer.setWatermark({
+          // Draw custom watermark in middle of the document
+          custom: (ctx, pageNumber, pageWidth, pageHeight) => {
+            // ctx is an instance of CanvasRenderingContext2D
+            // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
+            // Hence being able to leverage those properties
+            let originalPage = pageMappedDocs['stitchedPageLookup'][pageNumber]
+            let doc = pageFlags.find(d => d.documentid === originalPage.docid);
+            let pageFlag = doc.pageflag.find(f => f.page === originalPage.page);
+            if (pageFlag.flagid === pageFlagTypes["Duplicate"]) {
+              ctx.fillStyle = "#ff0000";
+              ctx.font = "20pt Arial";
+              ctx.globalAlpha = 0.4;
+
+              ctx.save();
+              ctx.translate(pageWidth / 2, pageHeight / 2);
+              ctx.rotate(-Math.PI / 4);
+              ctx.fillText("DUPLICATE", 0, 0);
+              ctx.restore();
+            }
+
+            if (pageFlag.flagid === pageFlagTypes["Not Responsive"]) {
+              ctx.fillStyle = "#ff0000";
+              ctx.font = "20pt Arial";
+              ctx.globalAlpha = 0.4;
+
+              ctx.save();
+              ctx.translate(pageWidth / 2, pageHeight / 2);
+              ctx.rotate(-Math.PI / 4);
+              ctx.fillText("NOT RESPONSIVE", 0, 0);
+              ctx.restore();
+            }
+          },
+        });
       }
       //Cleanup Function: removes previous event listeiner to ensure handleCreateResponsePDFClick event is not called multiple times on click
       return () => {

diff --git a/web/src/constants/constants.ts b/web/src/constants/constants.ts
@@ -19,3 +19,4 @@ export const ANNOTATION_PAGE_SIZE = window._env_?.REACT_APP_ANNOTATION_PAGE_SIZE
 export const PAGE_SELECT_LIMIT = window._env_?.REACT_APP_PAGE_SELECT_LIMIT ?? process.env.REACT_APP_PAGE_SELECT_LIMIT ?? 250;
 export const REDACTION_SELECT_LIMIT = window._env_?.REACT_APP_REDACTION_SELECT_LIMIT ?? process.env.REACT_APP_REDACTION_SELECT_LIMIT ?? 250;
 export const BIG_HTTP_GET_TIMEOUT = window._env_?.REACT_APP_BIG_HTTP_GET_TIMEOUT ?? process.env.REACT_APP_BIG_HTTP_GET_TIMEOUT ?? 300000;
+export const REDLINE_OPACITY = window._env_?.REACT_APP_REDLINE_OPACITY ?? process.env.REACT_APP_REDLINE_OPACITY ?? 0.5;