Skip to content
This repository was archived by the owner on Feb 19, 2025. It is now read-only.

Font size issue #39

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -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

36,922 changes: 36,922 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
7 changes: 5 additions & 2 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -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%
}
111 changes: 82 additions & 29 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -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>
);
};
168 changes: 168 additions & 0 deletions src/utils.js
Original file line number Diff line number Diff line change
@@ -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);
}