aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts10
-rw-r--r--src/client/util/DragManager.ts22
-rw-r--r--src/client/views/collections/CollectionPDFView.tsx35
-rw-r--r--src/client/views/collections/CollectionSubView.tsx7
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx61
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx1
-rw-r--r--src/client/views/nodes/PDFBox.scss29
-rw-r--r--src/client/views/nodes/PDFBox.tsx404
-rw-r--r--src/client/views/pdf/PDFAnnotationLayer.tsx24
-rw-r--r--src/client/views/pdf/PDFViewer.scss44
-rw-r--r--src/client/views/pdf/PDFViewer.tsx619
-rw-r--r--src/client/views/pdf/Page.tsx371
-rw-r--r--src/server/Search.ts3
-rw-r--r--src/server/index.ts58
14 files changed, 1284 insertions, 404 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b1df89dbd..91d3707f6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -69,15 +69,15 @@ export interface DocumentOptions {
const delegateKeys = ["x", "y", "width", "height", "panX", "panY"];
export namespace DocUtils {
- export function MakeLink(source: Doc, target: Doc, targetContext?: Doc) {
+ export function MakeLink(source: Doc, target: Doc, targetContext?: Doc, title: string = "", description: string = "", tags: string = "Default") {
let protoSrc = source.proto ? source.proto : source;
let protoTarg = target.proto ? target.proto : target;
UndoManager.RunInBatch(() => {
let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 });
let linkDocProto = Doc.GetProto(linkDoc);
- linkDocProto.title = source.title + " to " + target.title;
- linkDocProto.linkDescription = "";
- linkDocProto.linkTags = "Default";
+ linkDocProto.title = title === "" ? source.title + " to " + target.title : title;
+ linkDocProto.linkDescription = description;
+ linkDocProto.linkTags = tags;
linkDocProto.linkedTo = target;
linkDocProto.linkedFrom = source;
@@ -171,7 +171,7 @@ export namespace Docs {
}
function CreatePdfPrototype(): Doc {
let pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("annotations"),
- { x: 0, y: 0, nativeWidth: 1200, width: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1 });
+ { x: 0, y: 0, width: 300, height: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1 });
return pdfProto;
}
function CreateWebPrototype(): Doc {
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index ab00fabe1..0fdc6f193 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -157,6 +157,22 @@ export namespace DragManager {
[id: string]: any;
}
+ export class AnnotationDragData {
+ constructor(dragDoc: Doc, annotationDoc: Doc, dropDoc: Doc) {
+ this.dragDocument = dragDoc;
+ this.dropDocument = dropDoc;
+ this.annotationDocument = annotationDoc;
+ this.xOffset = this.yOffset = 0;
+ }
+ dragDocument: Doc;
+ annotationDocument: Doc;
+ dropDocument: Doc;
+ xOffset: number;
+ yOffset: number;
+ dropAction: dropActionType;
+ userDropAction: dropActionType;
+ }
+
export let StartDragFunctions: (() => void)[] = [];
export function StartDocumentDrag(eles: HTMLElement[], dragData: DocumentDragData, downX: number, downY: number, options?: DragOptions) {
@@ -170,6 +186,10 @@ export namespace DragManager {
dragData.draggedDocuments));
}
+ export function StartAnnotationDrag(eles: HTMLElement[], dragData: AnnotationDragData, downX: number, downY: number, options?: DragOptions) {
+ StartDrag(eles, dragData, downX, downY, options);
+ }
+
export class LinkDragData {
constructor(linkSourceDoc: Doc, blacklist: Doc[] = []) {
this.linkSourceDocument = linkSourceDoc;
@@ -217,7 +237,7 @@ export namespace DragManager {
let ys: number[] = [];
const docs: Doc[] =
- dragData instanceof DocumentDragData ? dragData.draggedDocuments : [];
+ dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof AnnotationDragData ? [dragData.dragDocument] : [];
let dragElements = eles.map(ele => {
const w = ele.offsetWidth,
h = ele.offsetHeight;
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index bf887ce7c..4af89d780 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, observable, IReactionDisposer, reaction } from "mobx";
import { observer } from "mobx-react";
import { ContextMenu } from "../ContextMenu";
import "./CollectionPDFView.scss";
@@ -9,10 +9,37 @@ import { CollectionRenderProps, CollectionBaseView, CollectionViewType } from ".
import { emptyFunction } from "../../../Utils";
import { NumCast } from "../../../new_fields/Types";
import { Id } from "../../../new_fields/FieldSymbols";
+import { HeightSym, WidthSym } from "../../../new_fields/Doc";
@observer
export class CollectionPDFView extends React.Component<FieldViewProps> {
+ private _reactionDisposer?: IReactionDisposer;
+ private _buttonTray: React.RefObject<HTMLDivElement>;
+
+ constructor(props: FieldViewProps) {
+ super(props);
+
+ this._buttonTray = React.createRef();
+ }
+
+ componentDidMount() {
+ this._reactionDisposer = reaction(
+ () => NumCast(this.props.Document.scrollY),
+ () => {
+ // let transform = this.props.ScreenToLocalTransform();
+ if (this._buttonTray.current) {
+ // console.log(this._buttonTray.current.offsetHeight);
+ // console.log(NumCast(this.props.Document.scrollY));
+ let scale = this.nativeWidth() / this.props.Document[WidthSym]();
+ this.props.Document.panY = NumCast(this.props.Document.scrollY);
+ // console.log(scale);
+ }
+ // console.log(this.props.Document[HeightSym]());
+ },
+ { fireImmediately: true }
+ )
+ }
public static LayoutString(fieldKey: string = "data") {
return FieldView.LayoutString(CollectionPDFView, fieldKey);
@@ -49,12 +76,12 @@ export class CollectionPDFView extends React.Component<FieldViewProps> {
private get uIButtons() {
let ratio = (this.curPage - 1) / this.numPages * 100;
return (
- <div className="collectionPdfView-buttonTray" key="tray" style={{ height: "100%" }}>
+ <div className="collectionPdfView-buttonTray" ref={this._buttonTray} key="tray" style={{ height: "100%" }}>
<button className="collectionPdfView-backward" onClick={this.onPageBack}>{"<"}</button>
<button className="collectionPdfView-forward" onClick={this.onPageForward}>{">"}</button>
- <div className="collectionPdfView-slider" onPointerDown={this.onThumbDown} style={{ top: 60, left: -20, width: 50, height: `calc(100% - 80px)` }} >
+ {/* <div className="collectionPdfView-slider" onPointerDown={this.onThumbDown} style={{ top: 60, left: -20, width: 50, height: `calc(100% - 80px)` }} >
<div className="collectionPdfView-thumb" onPointerDown={this.onThumbDown} style={{ top: `${ratio}%`, width: 50, height: 50 }} />
- </div>
+ </div> */}
</div>
);
}
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 93a1a8cda..b5a3d087e 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -95,6 +95,13 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
e.stopPropagation();
return added;
}
+ else if (de.data instanceof DragManager.AnnotationDragData) {
+ console.log("dropped!");
+ console.log(de.data);
+ // de.data.dropDocument.x = de.x;
+ // de.data.dropDocument.y = de.y;
+ return this.props.addDocument(de.data.dropDocument);
+ }
return false;
}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 63f24ff53..8e3c682c7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -80,30 +80,45 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
@undoBatch
@action
drop = (e: Event, de: DragManager.DropEvent) => {
- if (super.drop(e, de) && de.data instanceof DragManager.DocumentDragData) {
- if (de.data.droppedDocuments.length) {
- let dragDoc = de.data.droppedDocuments[0];
- let zoom = NumCast(dragDoc.zoomBasis, 1);
- let [xp, yp] = this.getTransform().transformPoint(de.x, de.y);
- let x = xp - de.data.xOffset / zoom;
- let y = yp - de.data.yOffset / zoom;
- let dropX = NumCast(de.data.droppedDocuments[0].x);
- let dropY = NumCast(de.data.droppedDocuments[0].y);
- de.data.droppedDocuments.forEach(d => {
- d.x = x + NumCast(d.x) - dropX;
- d.y = y + NumCast(d.y) - dropY;
- if (!NumCast(d.width)) {
- d.width = 300;
- }
- if (!NumCast(d.height)) {
- let nw = NumCast(d.nativeWidth);
- let nh = NumCast(d.nativeHeight);
- d.height = nw && nh ? nh / nw * NumCast(d.width) : 300;
- }
- this.bringToFront(d);
- });
+ if (super.drop(e, de)) {
+ if (de.data instanceof DragManager.DocumentDragData) {
+ if (de.data.droppedDocuments.length) {
+ let dragDoc = de.data.droppedDocuments[0];
+ let zoom = NumCast(dragDoc.zoomBasis, 1);
+ let [xp, yp] = this.getTransform().transformPoint(de.x, de.y);
+ let x = xp - de.data.xOffset / zoom;
+ let y = yp - de.data.yOffset / zoom;
+ let dropX = NumCast(de.data.droppedDocuments[0].x);
+ let dropY = NumCast(de.data.droppedDocuments[0].y);
+ de.data.droppedDocuments.forEach(d => {
+ d.x = x + NumCast(d.x) - dropX;
+ d.y = y + NumCast(d.y) - dropY;
+ if (!NumCast(d.width)) {
+ d.width = 300;
+ }
+ if (!NumCast(d.height)) {
+ let nw = NumCast(d.nativeWidth);
+ let nh = NumCast(d.nativeHeight);
+ d.height = nw && nh ? nh / nw * NumCast(d.width) : 300;
+ }
+ this.bringToFront(d);
+ });
+ }
+ }
+ else if (de.data instanceof DragManager.AnnotationDragData) {
+ if (de.data.dropDocument) {
+ let dragDoc = de.data.dropDocument;
+ let zoom = NumCast(dragDoc.zoomBasis, 1);
+ let [xp, yp] = this.getTransform().transformPoint(de.x, de.y);
+ let x = xp - de.data.xOffset / zoom;
+ let y = yp - de.data.yOffset / zoom;
+ let dropX = NumCast(de.data.dropDocument.x);
+ let dropY = NumCast(de.data.dropDocument.y);
+ dragDoc.x = x + NumCast(dragDoc.x) - dropX;
+ dragDoc.y = y + NumCast(dragDoc.y) - dropY;
+ this.bringToFront(dragDoc);
+ }
}
- return true;
}
return false;
}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 02396c3af..c2caabb92 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -23,6 +23,7 @@ import { FieldViewProps } from "./FieldView";
import { Without, OmitKeys } from "../../../Utils";
import { Cast, StrCast, NumCast } from "../../../new_fields/Types";
import { List } from "../../../new_fields/List";
+import { PDFBox2 } from "../pdf/PDFBox2";
const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
type BindingProps = Without<FieldViewProps, 'fieldKey'>;
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 449408a61..bb1f534c6 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -2,39 +2,58 @@
transform-origin: left top;
position: absolute;
top: 0;
- left:0;
+ left: 0;
}
+
.react-pdf__Page__textContent span {
user-select: text;
}
+
.react-pdf__Document {
position: absolute;
}
+
.pdfBox-buttonTray {
- position:absolute;
+ position: absolute;
top: 0;
- left:0;
+ left: 0;
z-index: 25;
pointer-events: all;
}
+
.pdfBox-thumbnail {
position: absolute;
width: 100%;
}
+
.pdfButton {
pointer-events: all;
width: 100px;
- height:100px;
+ height: 100px;
}
+
.pdfBox-cont {
- pointer-events: none ;
+ pointer-events: none;
+ display: flex;
+ flex-direction: row;
+
span {
pointer-events: none !important;
}
}
+.textlayer {
+ span {
+ pointer-events: all !important;
+ user-select: text;
+ }
+}
+
.pdfBox-cont-interactive {
pointer-events: all;
+ display: flex;
+ flex-direction: row;
}
+
.pdfBox-contentContainer {
position: absolute;
transform-origin: left top;
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 855c744e6..acb430deb 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -4,49 +4,22 @@ import { observer } from "mobx-react";
import 'react-image-lightbox/style.css';
import Measure from "react-measure";
//@ts-ignore
-import { Document, Page } from "react-pdf";
-import 'react-pdf/dist/Page/AnnotationLayer.css';
-import { Id } from "../../../new_fields/FieldSymbols";
-import { makeInterface } from "../../../new_fields/Schema";
-import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
-import { ImageField, PdfField } from "../../../new_fields/URLField";
+// import { Document, Page } from "react-pdf";
+// import 'react-pdf/dist/Page/AnnotationLayer.css';
import { RouteStore } from "../../../server/RouteStore";
-import { Utils } from '../../../Utils';
-import { DocServer } from "../../DocServer";
import { DocComponent } from "../DocComponent";
import { InkingControl } from "../InkingControl";
-import { SearchBox } from "../SearchBox";
-import { Annotation } from './Annotation';
import { positionSchema } from "./DocumentView";
import { FieldView, FieldViewProps } from './FieldView';
import { pageSchema } from "./ImageBox";
import "./PDFBox.scss";
-var path = require('path');
import React = require("react");
-import { ContextMenu } from "../ContextMenu";
-
-/** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
- * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting,
- * area selection (I call it stickies), embedded ink node for directly annotating using a pen or
- * mouse, and pagination.
- *
- *
- * HOW TO USE:
- * AREA selection:
- * 1) Click on Area button.
- * 2) click on any part of the PDF, and drag to get desired sized area shape
- * 3) You can write on the area (hence the reason why it's called sticky)
- * 4) to make another area, you need to click on area button AGAIN.
- *
- * HIGHLIGHT: (Buggy. No multiline/multidiv text highlighting for now...)
- * 1) just click and drag on a text
- * 2) click highlight
- * 3) for annotation, just pull your cursor over to that text
- * 4) another method: click on highlight first and then drag on your desired text
- * 5) To make another highlight, you need to reclick on the button
- *
- * written by: Andrew Kim
- */
+import { NumCast, StrCast, Cast } from "../../../new_fields/Types";
+import { makeInterface } from "../../../new_fields/Schema";
+import { PDFViewer } from "../pdf/PDFViewer";
+import { PdfField } from "../../../new_fields/URLField";
+import { HeightSym, WidthSym } from "../../../new_fields/Doc";
+import { CollectionStackingView } from "../collections/CollectionStackingView";
type PdfDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>;
const PdfDocument = makeInterface(positionSchema, pageSchema);
@@ -55,349 +28,50 @@ const PdfDocument = makeInterface(positionSchema, pageSchema);
export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocument) {
public static LayoutString() { return FieldView.LayoutString(PDFBox); }
- private _mainDiv = React.createRef<HTMLDivElement>();
- private renderHeight = 2400;
-
- @observable private _renderAsSvg = true;
@observable private _alt = false;
-
- private _reactionDisposer?: IReactionDisposer;
-
- @observable private _perPageInfo: Object[] = []; //stores pageInfo
- @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno
-
- @observable private _currAnno: any = [];
- @observable private _interactive: boolean = false;
-
- @computed private get curPage() { return NumCast(this.Document.curPage, 1); }
- @computed private get thumbnailPage() { return NumCast(this.props.Document.thumbnailPage, -1); }
-
- componentDidMount() {
- let wasSelected = this.props.active();
- this._reactionDisposer = reaction(
- () => [this.props.active(), this.curPage],
- () => {
- setTimeout(action(() => { // this forces the active() check to happen after all changes in a transaction have occurred.
- if (this.curPage > 0 && !this.props.isTopMost && this.curPage !== this.thumbnailPage && wasSelected && !this.props.active()) {
- this.saveThumbnail();
- }
- wasSelected = this._interactive = this.props.active();
- }), 0);
- },
- { fireImmediately: true });
-
- }
-
- componentWillUnmount() {
- if (this._reactionDisposer) this._reactionDisposer();
- }
-
- /**
- * highlighting helper function
- */
- makeEditableAndHighlight = (colour: string) => {
- var range, sel = window.getSelection();
- if (sel && sel.rangeCount && sel.getRangeAt) {
- range = sel.getRangeAt(0);
- }
- document.designMode = "on";
- if (!document.execCommand("HiliteColor", false, colour)) {
- document.execCommand("HiliteColor", false, colour);
- }
-
- if (range && sel) {
- sel.removeAllRanges();
- sel.addRange(range);
-
- let obj: Object = { parentDivs: [], spans: [] };
- //@ts-ignore
- if (range.commonAncestorContainer.className === 'react-pdf__Page__textContent') { //multiline highlighting case
- obj = this.highlightNodes(range.commonAncestorContainer.childNodes);
- } else { //single line highlighting case
- let parentDiv = range.commonAncestorContainer.parentElement;
- if (parentDiv) {
- if (parentDiv.className === 'react-pdf__Page__textContent') { //when highlight is overwritten
- obj = this.highlightNodes(parentDiv.childNodes);
- } else {
- parentDiv.childNodes.forEach((child) => {
- if (child.nodeName === 'SPAN') {
- //@ts-ignore
- obj.parentDivs.push(parentDiv);
- //@ts-ignore
- child.id = "highlighted";
- //@ts-ignore
- obj.spans.push(child);
- // child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
- }
- });
- }
- }
+ @observable private _scrollY: number = 0;
+
+ loaded = (nw: number, nh: number) => {
+ if (this.props.Document) {
+ let doc = this.props.Document.proto ? this.props.Document.proto : this.props.Document;
+ doc.nativeWidth = nw;
+ doc.nativeHeight = nh;
+ let ccv = this.props.ContainingCollectionView;
+ if (ccv) {
+ ccv.props.Document.pdfHeight = nh;
}
- this._pageInfo.divs.push(obj);
-
+ doc.height = nh * (doc[WidthSym]() / nw);
}
- document.designMode = "off";
- }
-
- highlightNodes = (nodes: NodeListOf<ChildNode>) => {
- let temp = { parentDivs: [], spans: [] };
- nodes.forEach((div) => {
- div.childNodes.forEach((child) => {
- if (child.nodeName === 'SPAN') {
- //@ts-ignore
- temp.parentDivs.push(div);
- //@ts-ignore
- child.id = "highlighted";
- //@ts-ignore
- temp.spans.push(child);
- // child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler
- }
- });
-
- });
- return temp;
}
- /**
- * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES
- */
@action
- onEnter = (e: any) => {
- let span: HTMLSpanElement = e.toElement;
- let index: any;
- this._pageInfo.divs.forEach((obj: any) => {
- obj.spans.forEach((element: any) => {
- if (element === span && !index) {
- index = this._pageInfo.divs.indexOf(obj);
- }
- });
- });
-
- if (this._pageInfo.anno.length >= index + 1) {
- if (this._currAnno.length === 0) {
- this._currAnno.push(this._pageInfo.anno[index]);
- }
- } else {
- if (this._currAnno.length === 0) { //if there are no current annotation
- let div = span.offsetParent;
- //@ts-ignore
- let divX = div.style.left;
- //@ts-ignore
- let divY = div.style.top;
- //slicing "px" from the end
- divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span)
- divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span)
- let annotation = <Annotation key={Utils.GenerateGuid()} Span={span} X={divX} Y={divY - 300} Highlights={this._pageInfo.divs} Annotations={this._pageInfo.anno} CurrAnno={this._currAnno} />;
- this._pageInfo.anno.push(annotation);
- this._currAnno.push(annotation);
- }
- }
-
- }
-
- /**
- * highlight function for highlighting actual text. This works fine.
- */
- highlight = (color: string) => {
- if (window.getSelection()) {
- try {
- if (!document.execCommand("hiliteColor", false, color)) {
- this.makeEditableAndHighlight(color);
- }
- } catch (ex) {
- this.makeEditableAndHighlight(color);
- }
- }
- }
-
- /**
- * controls the area highlighting (stickies) Kinda temporary
- */
- onPointerDown = (e: React.PointerEvent) => {
- if (this.props.isSelected() && !InkingControl.Instance.selectedTool && e.buttons === 1) {
- if (e.altKey) {
- this._alt = true;
- } else {
- if (e.metaKey) {
- e.stopPropagation();
- }
+ onScroll = (e: React.UIEvent<HTMLDivElement>) => {
+ if (e.currentTarget) {
+ this._scrollY = e.currentTarget.scrollTop;
+ // e.currentTarget.scrollTo({ top: 1000, behavior: "smooth" });
+ let ccv = this.props.ContainingCollectionView;
+ if (ccv) {
+ ccv.props.Document.scrollY = this._scrollY;
}
- document.removeEventListener("pointerup", this.onPointerUp);
- document.addEventListener("pointerup", this.onPointerUp);
}
- if (this.props.isSelected() && e.buttons === 2) {
- runInAction(() => this._alt = true);
- document.removeEventListener("pointerup", this.onPointerUp);
- document.addEventListener("pointerup", this.onPointerUp);
- }
- }
-
- /**
- * controls area highlighting and partially highlighting. Kinda temporary
- */
- @action
- onPointerUp = (e: PointerEvent) => {
- this._alt = false;
- document.removeEventListener("pointerup", this.onPointerUp);
- if (this.props.isSelected()) {
- this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color.
- }
- this._interactive = true;
- }
-
-
- @action
- saveThumbnail = () => {
- this.props.Document.thumbnailPage = FieldValue(this.Document.curPage, -1);
- this._renderAsSvg = false;
- setTimeout(() => {
- runInAction(() => this._smallRetryCount = this._mediumRetryCount = this._largeRetryCount = 0);
- let nwidth = FieldValue(this.Document.nativeWidth, 0);
- let nheight = FieldValue(this.Document.nativeHeight, 0);
- htmlToImage.toPng(this._mainDiv.current!, { width: nwidth, height: nheight, quality: 0.8 })
- .then(action((dataUrl: string) => {
- SearchBox.convertDataUri(dataUrl, "icon" + this.Document[Id] + "_" + this.curPage).then((returnedFilename) => {
- if (returnedFilename) {
- let url = DocServer.prepend(returnedFilename);
- this.props.Document.thumbnail = new ImageField(new URL(url));
- }
- runInAction(() => this._renderAsSvg = true);
- })
- }))
- .catch(function (error: any) {
- console.error('oops, something went wrong!', error);
- });
- }, 1250);
}
- @action
- onLoaded = (page: any) => {
- // bcz: the number of pages should really be set when the document is imported.
- this.props.Document.numPages = page._transport.numPages;
- if (this._perPageInfo.length === 0) { //Makes sure it only runs once
- this._perPageInfo = [...Array(page._transport.numPages)];
- }
- }
-
- @action
- setScaling = (r: any) => {
- // bcz: the nativeHeight should really be set when the document is imported.
- // also, the native dimensions could be different for different pages of the canvas
- // so this design is flawed.
- var nativeWidth = FieldValue(this.Document.nativeWidth, 0);
- if (!FieldValue(this.Document.nativeHeight, 0)) {
- var nativeHeight = nativeWidth * r.offset.height / r.offset.width;
- this.props.Document.height = nativeHeight / nativeWidth * FieldValue(this.Document.width, 0);
- this.props.Document.nativeHeight = nativeHeight;
- }
- }
- @computed
- get pdfPage() {
- return <Page height={this.renderHeight} renderTextLayer={false} pageNumber={this.curPage} onLoadSuccess={this.onLoaded} />;
- }
- @computed
- get pdfContent() {
- let pdfUrl = Cast(this.props.Document[this.props.fieldKey], PdfField);
- if (!pdfUrl) {
- return <p>No pdf url to render</p>;
- }
- let pdfpage = this.pdfPage;
- let body = this.Document.nativeHeight ?
- pdfpage :
- <Measure offset onResize={this.setScaling}>
- {({ measureRef }) =>
- <div className="pdfBox-page" ref={measureRef}>
- {pdfpage}
- </div>
- }
- </Measure>;
- let xf = (this.Document.nativeHeight || 0) / this.renderHeight;
- return <div className="pdfBox-contentContainer" key="container" style={{ transform: `scale(${xf}, ${xf})` }}>
- <Document file={window.origin + RouteStore.corsProxy + `/${pdfUrl.url}`} renderMode={this._renderAsSvg || this.props.isTopMost ? "svg" : "canvas"}>
- {body}
- </Document>
- </div >;
- }
-
- @computed
- get pdfRenderer() {
- let pdfUrl = Cast(this.props.Document[this.props.fieldKey], PdfField);
- let proxy = this.imageProxyRenderer;
- if ((!this._interactive && proxy && (!this.props.ContainingCollectionView || !this.props.ContainingCollectionView.props.isTopMost)) || !pdfUrl) {
- return proxy;
- }
- return [
- proxy,
- this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element),
- this._currAnno.map((element: any) => element),
- this.pdfContent
- ];
- }
-
- choosePath(url: URL) {
- if (url.protocol === "data" || url.href.indexOf(window.location.origin) === -1)
- return url.href;
- let ext = path.extname(url.href);
- return url.href.replace(ext, this._curSuffix + ext);
- }
- @observable _smallRetryCount = 1;
- @observable _mediumRetryCount = 1;
- @observable _largeRetryCount = 1;
- @action retryPath = () => {
- if (this._curSuffix === "_s") this._smallRetryCount++;
- if (this._curSuffix === "_m") this._mediumRetryCount++;
- if (this._curSuffix === "_l") this._largeRetryCount++;
- }
- @action onError = () => {
- let timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount;
- if (timeout < 10)
- setTimeout(this.retryPath, Math.min(10000, timeout * 5));
- }
- _curSuffix = "_m";
-
- @computed
- get imageProxyRenderer() {
- let thumbField = this.props.Document.thumbnail;
- if (thumbField && this._renderAsSvg && NumCast(this.props.Document.thumbnailPage, 0) === this.Document.curPage) {
-
- // let transform = this.props.ScreenToLocalTransform().inverse();
- let pw = typeof this.props.PanelWidth === "function" ? this.props.PanelWidth() : typeof this.props.PanelWidth === "number" ? (this.props.PanelWidth as any) as number : 50;
- // var [sptX, sptY] = transform.transformPoint(0, 0);
- // let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
- // let w = bptX - sptX;
-
- let path = thumbField instanceof ImageField ? thumbField.url.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
- // this._curSuffix = "";
- // if (w > 20) {
- let field = thumbField;
- // if (w < 100 && this._smallRetryCount < 10) this._curSuffix = "_s";
- // else if (w < 400 && this._mediumRetryCount < 10) this._curSuffix = "_m";
- // else if (this._largeRetryCount < 10) this._curSuffix = "_l";
- if (field instanceof ImageField) path = this.choosePath(field.url);
- // }
- return <img className="pdfBox-thumbnail" key={path + (this._mediumRetryCount).toString()} src={path} onError={this.onError} />;
- }
- return (null);
- }
- @action onKeyDown = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = true);
- @action onKeyUp = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = false);
- onContextMenu = (e: React.MouseEvent): void => {
- let field = Cast(this.Document[this.props.fieldKey], PdfField);
- if (field) {
- let url = field.url.href;
- ContextMenu.Instance.addItem({
- description: "Copy path", event: () => {
- Utils.CopyText(url);
- }, icon: "expand-arrows-alt"
- });
- }
- }
render() {
+ trace();
+ // uses mozilla pdf as default
+ const pdfUrl = Cast(this.props.Document.data, PdfField, new PdfField(window.origin + RouteStore.corsProxy + "/https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"));
+ console.log(pdfUrl);
let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : "");
return (
- <div className={classname} tabIndex={0} ref={this._mainDiv} onPointerDown={this.onPointerDown} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} onContextMenu={this.onContextMenu} >
- {this.pdfRenderer}
- </div >
+ <div onScroll={this.onScroll}
+ style={{
+ overflowY: "scroll", overflowX: "hidden", height: `${NumCast(this.props.Document.nativeHeight ? this.props.Document.nativeHeight : 300)}px`,
+ marginTop: `${NumCast(this.props.ContainingCollectionView!.props.Document.panY)}px`
+ }}
+ onWheel={(e: React.WheelEvent) => e.stopPropagation()} className={classname}>
+ <PDFViewer url={pdfUrl.url.href} loaded={this.loaded} scrollY={this._scrollY} parent={this} />
+ {/* <div style={{ width: "100px", height: "300px" }}></div> */}
+ </div>
);
}
diff --git a/src/client/views/pdf/PDFAnnotationLayer.tsx b/src/client/views/pdf/PDFAnnotationLayer.tsx
new file mode 100644
index 000000000..e92dcacbf
--- /dev/null
+++ b/src/client/views/pdf/PDFAnnotationLayer.tsx
@@ -0,0 +1,24 @@
+import React = require("react");
+import { observer } from "mobx-react";
+
+interface IAnnotationProps {
+
+}
+
+@observer
+export class PDFAnnotationLayer extends React.Component {
+ onPointerDown = (e: React.PointerEvent) => {
+ if (e.ctrlKey) {
+ console.log("annotating");
+ e.stopPropagation();
+ }
+ }
+
+ render() {
+ return (
+ <div className="pdfAnnotationLayer-cont" style={{ width: "100%", height: "100%", position: "relative", top: "-200%" }} onPointerDown={this.onPointerDown}>
+
+ </div>
+ )
+ }
+} \ No newline at end of file
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
new file mode 100644
index 000000000..53c33ce0b
--- /dev/null
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -0,0 +1,44 @@
+.textLayer {
+ div {
+ user-select: text;
+ }
+}
+
+.viewer-button-cont {
+ position: absolute;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+}
+
+.viewer-previousPage,
+.viewer-nextPage {
+ background: grey;
+ font-weight: bold;
+ opacity: 0.5;
+ padding: 0 10px;
+ border-radius: 5px;
+}
+
+.textLayer {
+ user-select: auto;
+}
+
+.pdfViewer-annotationBox {
+ position: absolute;
+ background-color: red;
+ opacity: 0.1;
+}
+
+.pdfViewer-annotationLayer {
+ position: absolute;
+ top: 0;
+}
+
+
+
+.pdfViewer-pinAnnotation {
+ background-color: red;
+ position: absolute;
+ border-radius: 100%;
+} \ No newline at end of file
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
new file mode 100644
index 000000000..4b949aa3e
--- /dev/null
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -0,0 +1,619 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { observable, action, runInAction, computed, IReactionDisposer, reaction, trace } from "mobx";
+import * as Pdfjs from "pdfjs-dist";
+import { Opt, HeightSym, WidthSym, Doc, DocListCast } from "../../../new_fields/Doc";
+import "./PDFViewer.scss";
+import "pdfjs-dist/web/pdf_viewer.css";
+import { PDFBox } from "../nodes/PDFBox";
+import Page from "./Page";
+import { NumCast, Cast, BoolCast, StrCast } from "../../../new_fields/Types";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { DocUtils, Docs } from "../../documents/Documents";
+import { DocumentManager } from "../../util/DocumentManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { List } from "../../../new_fields/List";
+import { DocumentContentsView } from "../nodes/DocumentContentsView";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { Transform } from "../../util/Transform";
+import { emptyFunction, returnTrue, returnFalse } from "../../../Utils";
+import { DocumentView } from "../nodes/DocumentView";
+import { DragManager } from "../../util/DragManager";
+import { Dictionary } from "typescript-collections";
+
+interface IPDFViewerProps {
+ url: string;
+ loaded: (nw: number, nh: number) => void;
+ scrollY: number;
+ parent: PDFBox;
+}
+
+/**
+ * Wrapper that loads the PDF and cascades the pdf down
+ */
+@observer
+export class PDFViewer extends React.Component<IPDFViewerProps> {
+ @observable _pdf: Opt<Pdfjs.PDFDocumentProxy>;
+ private _mainDiv = React.createRef<HTMLDivElement>();
+
+ @action
+ componentDidMount() {
+ const pdfUrl = this.props.url;
+ console.log("pdf starting to load")
+ let promise = Pdfjs.getDocument(pdfUrl).promise;
+
+ promise.then((pdf: Pdfjs.PDFDocumentProxy) => {
+ runInAction(() => {
+ console.log("pdf url received");
+ this._pdf = pdf;
+ });
+ });
+ }
+
+ render() {
+ return (
+ <div ref={this._mainDiv}>
+ <Viewer pdf={this._pdf} loaded={this.props.loaded} scrollY={this.props.scrollY} parent={this.props.parent} mainCont={this._mainDiv} url={this.props.url} />
+ </div>
+ );
+ }
+}
+
+interface IViewerProps {
+ pdf: Opt<Pdfjs.PDFDocumentProxy>;
+ loaded: (nw: number, nh: number) => void;
+ scrollY: number;
+ parent: PDFBox;
+ mainCont: React.RefObject<HTMLDivElement>;
+ url: string;
+}
+
+const PinRadius = 25;
+
+/**
+ * Handles rendering and virtualization of the pdf
+ */
+@observer
+class Viewer extends React.Component<IViewerProps> {
+ // _visibleElements is the array of JSX elements that gets rendered
+ @observable.shallow private _visibleElements: JSX.Element[] = [];
+ // _isPage is an array that tells us whether or not an index is rendered as a page or as a placeholder
+ @observable private _isPage: boolean[] = [];
+ @observable private _pageSizes: { width: number, height: number }[] = [];
+ @observable private _startIndex: number = 0;
+ @observable private _endIndex: number = 1;
+ @observable private _loaded: boolean = false;
+ @observable private _pdf: Opt<Pdfjs.PDFDocumentProxy>;
+ @observable private _annotations: Doc[] = [];
+ @observable private _pointerEvents: "all" | "none" = "all";
+ @observable private _savedAnnotations: Dictionary<number, HTMLDivElement[]> = new Dictionary<number, HTMLDivElement[]>();
+
+ private _pageBuffer: number = 1;
+ private _annotationLayer: React.RefObject<HTMLDivElement>;
+ private _reactionDisposer?: IReactionDisposer;
+ private _annotationReactionDisposer?: IReactionDisposer;
+ private _pagesLoaded: number = 0;
+ private _dropDisposer?: DragManager.DragDropDisposer;
+
+ constructor(props: IViewerProps) {
+ super(props);
+
+ this._annotationLayer = React.createRef();
+ }
+
+ @action
+ componentDidMount = () => {
+ let wasSelected = this.props.parent.props.active();
+ // reaction for when document gets (de)selected
+ this._reactionDisposer = reaction(
+ () => [this.props.parent.props.active(), this.startIndex],
+ () => {
+ // if deselected, render images in place of pdf
+ if (wasSelected && !this.props.parent.props.active()) {
+ this.saveThumbnail();
+ this._pointerEvents = "all";
+ }
+ // if selected, render pdf
+ else if (!wasSelected && this.props.parent.props.active()) {
+ this.renderPages(this.startIndex, this.endIndex, true);
+ this._pointerEvents = "none";
+ }
+ wasSelected = this.props.parent.props.active();
+ },
+ { fireImmediately: true }
+ );
+
+ if (this.props.parent.Document) {
+ this._annotationReactionDisposer = reaction(
+ () => DocListCast(this.props.parent.Document.annotations),
+ () => {
+ let annotations = DocListCast(this.props.parent.Document.annotations);
+ if (annotations && annotations.length) {
+ this.renderAnnotations(annotations, true);
+ }
+ },
+ { fireImmediately: true }
+ );
+ }
+
+ setTimeout(() => {
+ this.renderPages(this.startIndex, this.endIndex, true);
+ }, 1000);
+ }
+
+ private mainCont = (div: HTMLDivElement | null) => {
+ if (this._dropDisposer) {
+ this._dropDisposer();
+ }
+ if (div) {
+ this._dropDisposer = DragManager.MakeDropTarget(div, {
+ handlers: { drop: this.drop.bind(this) }
+ });
+ }
+ }
+
+ makeAnnotationDocument = (sourceDoc: Doc): Doc => {
+ let annoDocs: Doc[] = [];
+ this._savedAnnotations.forEach((key: number, value: HTMLDivElement[]) => {
+ for (let anno of value) {
+ let annoDoc = new Doc();
+ if (anno.style.left) annoDoc.x = parseInt(anno.style.left);
+ if (anno.style.top) annoDoc.y = parseInt(anno.style.top);
+ if (anno.style.height) annoDoc.height = parseInt(anno.style.height);
+ if (anno.style.width) annoDoc.width = parseInt(anno.style.width);
+ annoDoc.page = key;
+ annoDoc.target = sourceDoc;
+ annoDoc.type = AnnotationTypes.Region;
+ annoDocs.push(annoDoc);
+ anno.remove();
+ }
+ });
+
+ let annoDoc = new Doc();
+ annoDoc.annotations = new List<Doc>(annoDocs);
+ DocUtils.MakeLink(sourceDoc, annoDoc, undefined, `Annotation from ${StrCast(this.props.parent.Document.title)}`, "", StrCast(this.props.parent.Document.title));
+ this._savedAnnotations.clear();
+ return annoDoc;
+ }
+
+ drop = async (e: Event, de: DragManager.DropEvent) => {
+ if (de.data instanceof DragManager.LinkDragData) {
+ let sourceDoc = de.data.linkSourceDocument;
+ let destDoc = this.makeAnnotationDocument(sourceDoc);
+ let targetAnnotations = DocListCast(this.props.parent.Document.annotations);
+ if (targetAnnotations) {
+ targetAnnotations.push(destDoc);
+ this.props.parent.Document.annotations = new List<Doc>(targetAnnotations);
+ }
+ else {
+ this.props.parent.Document.annotations = new List<Doc>([destDoc]);
+ }
+ e.stopPropagation();
+ }
+ }
+
+ componentWillUnmount = () => {
+ if (this._reactionDisposer) {
+ this._reactionDisposer();
+ }
+ if (this._annotationReactionDisposer) {
+ this._annotationReactionDisposer();
+ }
+ }
+
+ @action
+ saveThumbnail = () => {
+ // file address of the pdf
+ const address: string = this.props.url;
+ for (let i = 0; i < this._visibleElements.length; i++) {
+ if (this._isPage[i]) {
+ // change the address to be the file address of the PNG version of each page
+ let thisAddress = `${address.substring(0, address.length - ".pdf".length)}-${i + 1}.PNG`;
+ let nWidth = this._pageSizes[i].width;
+ let nHeight = this._pageSizes[i].height;
+ // replace page with image
+ this._visibleElements[i] = <img key={thisAddress} style={{ width: `${nWidth}px`, height: `${nHeight}px` }} src={thisAddress} />;
+ }
+ }
+ }
+
+ @computed get scrollY(): number {
+ return this.props.scrollY;
+ }
+
+ @computed get startIndex(): number {
+ return Math.max(0, this.getIndex(this.scrollY) - this._pageBuffer);
+ }
+
+ @computed get endIndex(): number {
+ let width = this._pageSizes.map(i => i ? i.width : 0);
+ return Math.min(this.props.pdf ? this.props.pdf.numPages - 1 : 0, this.getIndex(this.scrollY + Math.max(...width)) + this._pageBuffer);
+ }
+
+ componentDidUpdate = (prevProps: IViewerProps) => {
+ if (this.scrollY !== prevProps.scrollY || this._pdf !== this.props.pdf) {
+ this._pdf = this.props.pdf;
+ // render pages if the scorll position changes
+ this.renderPages(this.startIndex, this.endIndex);
+ }
+ }
+
+ @action
+ private renderAnnotations = (annotations: Doc[], removeOldAnnotations: boolean): void => {
+ if (removeOldAnnotations) {
+ this._annotations = annotations;
+ }
+ else {
+ this._annotations.push(...annotations);
+ this._annotations = new Array<Doc>(...this._annotations);
+ }
+ }
+
+ /**
+ * @param startIndex: where to start rendering pages
+ * @param endIndex: where to end rendering pages
+ * @param forceRender: (optional), force pdfs to re-render, even if the page already exists
+ */
+ @action
+ renderPages = (startIndex: number, endIndex: number, forceRender: boolean = false) => {
+ let numPages = this.props.pdf ? this.props.pdf.numPages : 0;
+ if (!this.props.pdf) {
+ return;
+ }
+
+ if (this._pageSizes.length !== numPages) {
+ this._pageSizes = new Array(numPages).map(i => ({ width: 0, height: 0 }));
+ }
+
+ // this is only for an initial render to get all of the pages rendered
+ if (this._visibleElements.length !== numPages) {
+ let divs = Array.from(Array(numPages).keys()).map(i => (
+ <Page
+ pdf={this.props.pdf}
+ page={i}
+ numPages={numPages}
+ key={`${this.props.pdf ? this.props.pdf.fingerprint + `-page${i + 1}` : "undefined"}`}
+ name={`${this.props.pdf ? this.props.pdf.fingerprint + `-page${i + 1}` : "undefined"}`}
+ pageLoaded={this.pageLoaded}
+ parent={this.props.parent}
+ renderAnnotations={this.renderAnnotations}
+ makePin={this.createPinAnnotation}
+ createAnnotation={this.createAnnotation}
+ sendAnnotations={this.receiveAnnotations}
+ makeAnnotationDocuments={this.makeAnnotationDocument}
+ receiveAnnotations={this.sendAnnotations}
+ {...this.props} />
+ ));
+ let arr = Array.from(Array(numPages).keys()).map(() => false);
+ this._visibleElements.push(...divs);
+ this._isPage.push(...arr);
+ }
+
+ // if nothing changed, return
+ if (startIndex === this._startIndex && endIndex === this._endIndex && !forceRender) {
+ return;
+ }
+
+ // unrender pages outside of the pdf by replacing them with empty stand-in divs
+ for (let i = 0; i < numPages; i++) {
+ if (i < startIndex || i > endIndex) {
+ if (this._isPage[i]) {
+ this._visibleElements[i] = (
+ <div key={`pdfviewer-placeholder-${i}`} className="pdfviewer-placeholder" style={{ width: this._pageSizes[i] ? this._pageSizes[i].width : 0, height: this._pageSizes[i] ? this._pageSizes[i].height : 0 }} />
+ );
+ }
+ this._isPage[i] = false;
+ }
+ }
+
+ // render pages for any indices that don't already have pages (force rerender will make these render regardless)
+ for (let i = startIndex; i <= endIndex; i++) {
+ if (!this._isPage[i] || (this._isPage[i] && forceRender)) {
+ this._visibleElements[i] = (
+ <Page
+ pdf={this.props.pdf}
+ page={i}
+ numPages={numPages}
+ key={`${this.props.pdf ? this.props.pdf.fingerprint + `-page${i + 1}` : "undefined"}`}
+ name={`${this.props.pdf ? this.props.pdf.fingerprint + `-page${i + 1}` : "undefined"}`}
+ pageLoaded={this.pageLoaded}
+ parent={this.props.parent}
+ makePin={this.createPinAnnotation}
+ renderAnnotations={this.renderAnnotations}
+ createAnnotation={this.createAnnotation}
+ sendAnnotations={this.receiveAnnotations}
+ makeAnnotationDocuments={this.makeAnnotationDocument}
+ receiveAnnotations={this.sendAnnotations}
+ {...this.props} />
+ );
+ this._isPage[i] = true;
+ }
+ }
+
+ this._startIndex = startIndex;
+ this._endIndex = endIndex;
+
+ return;
+ }
+
+ @action
+ receiveAnnotations = (annotations: HTMLDivElement[], page: number) => {
+ if (page === -1) {
+ this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove()));
+ this._savedAnnotations.keys().forEach(k => this._savedAnnotations.setValue(k, annotations));
+ }
+ else {
+ this._savedAnnotations.setValue(page, annotations);
+ }
+ }
+
+ sendAnnotations = (page: number): HTMLDivElement[] | undefined => {
+ return this._savedAnnotations.getValue(page);
+ }
+
+ createPinAnnotation = (x: number, y: number, page: number): void => {
+ let targetDoc = Docs.TextDocument({ width: 100, height: 50, title: "New Pin Annotation" });
+
+ let pinAnno = new Doc();
+ pinAnno.x = x;
+ pinAnno.y = y + this.getPageHeight(page);
+ pinAnno.width = pinAnno.height = PinRadius;
+ pinAnno.page = page;
+ pinAnno.target = targetDoc;
+ pinAnno.type = AnnotationTypes.Pin;
+ // this._annotations.push(pinAnno);
+ let annoDoc = new Doc();
+ annoDoc.annotations = new List<Doc>([pinAnno]);
+ let annotations = DocListCast(this.props.parent.Document.annotations);
+ if (annotations && annotations.length) {
+ annotations.push(annoDoc);
+ this.props.parent.Document.annotations = new List<Doc>(annotations);
+ }
+ else {
+ this.props.parent.Document.annotations = new List<Doc>([annoDoc]);
+ }
+ }
+
+ // get the page index that the vertical offset passed in is on
+ getIndex = (vOffset: number) => {
+ if (this._loaded) {
+ let numPages = this.props.pdf ? this.props.pdf.numPages : 0;
+ let index = 0;
+ let currOffset = vOffset;
+ while (index < numPages && currOffset - this._pageSizes[index].height > 0) {
+ currOffset -= this._pageSizes[index].height;
+ index++;
+ }
+ return index;
+ }
+ return 0;
+ }
+
+ /**
+ * Called by the Page class when it gets rendered, initializes the lists and
+ * puts a placeholder with all of the correct page sizes when all of the pages have been loaded.
+ */
+ @action
+ pageLoaded = (index: number, page: Pdfjs.PDFPageViewport): void => {
+ if (this._loaded) {
+ return;
+ }
+ let numPages = this.props.pdf ? this.props.pdf.numPages : 0;
+ this.props.loaded(page.width, page.height);
+ this._pageSizes[index - 1] = { width: page.width, height: page.height };
+ this._pagesLoaded++;
+ if (this._pagesLoaded === numPages) {
+ this._loaded = true;
+ let divs = Array.from(Array(numPages).keys()).map(i => (
+ <div key={`pdfviewer-placeholder-${i}`} className="pdfviewer-placeholder" style={{ width: this._pageSizes[i] ? this._pageSizes[i].width : 0, height: this._pageSizes[i] ? this._pageSizes[i].height : 0 }} />
+ ));
+ this._visibleElements = new Array<JSX.Element>(...divs);
+ this.renderPages(this.startIndex, this.endIndex, true);
+ }
+ }
+
+ getPageHeight = (index: number): number => {
+ let counter = 0;
+ if (this.props.pdf && index < this.props.pdf.numPages) {
+ for (let i = 0; i < index; i++) {
+ if (this._pageSizes[i]) {
+ counter += this._pageSizes[i].height;
+ }
+ }
+ }
+ return counter;
+ }
+
+ createAnnotation = (div: HTMLDivElement, page: number) => {
+ if (this._annotationLayer.current) {
+ if (div.style.top) {
+ div.style.top = (parseInt(div.style.top) + this.getPageHeight(page)).toString();
+ }
+ this._annotationLayer.current.append(div);
+ let savedPage = this._savedAnnotations.getValue(page);
+ if (savedPage) {
+ savedPage.push(div);
+ this._savedAnnotations.setValue(page, savedPage);
+ }
+ else {
+ this._savedAnnotations.setValue(page, [div]);
+ }
+ }
+ }
+
+ renderAnnotation = (anno: Doc): JSX.Element[] => {
+ let annotationDocs = DocListCast(anno.annotations);
+ let res = annotationDocs.map(a => {
+ let type = NumCast(a.type);
+ switch (type) {
+ case AnnotationTypes.Pin:
+ return <PinAnnotation parent={this} document={a} x={NumCast(a.x)} y={NumCast(a.y)} width={a[WidthSym]()} height={a[HeightSym]()} key={a[Id]} />;
+ case AnnotationTypes.Region:
+ return <RegionAnnotation parent={this} document={a} x={NumCast(a.x)} y={NumCast(a.y)} width={a[WidthSym]()} height={a[HeightSym]()} key={a[Id]} />;
+ default:
+ return <div></div>;
+ }
+ });
+ return res;
+ }
+
+ render() {
+ trace();
+ return (
+ <div ref={this.mainCont} style={{ pointerEvents: "all" }}>
+ <div className="viewer">
+ {this._visibleElements}
+ </div>
+ <div className="pdfViewer-annotationLayer" style={{ height: this.props.parent.Document.nativeHeight, width: `100%`, pointerEvents: this._pointerEvents }}>
+ <div className="pdfViewer-annotationLayer-subCont" ref={this._annotationLayer}>
+ {this._annotations.map(anno => this.renderAnnotation(anno))}
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
+
+export enum AnnotationTypes {
+ Region, Pin
+}
+
+interface IAnnotationProps {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+ parent: Viewer;
+ document: Doc;
+}
+
+@observer
+class PinAnnotation extends React.Component<IAnnotationProps> {
+ @observable private _backgroundColor: string = "green";
+ @observable private _display: string = "initial";
+
+ private _mainCont: React.RefObject<HTMLDivElement>;
+
+ constructor(props: IAnnotationProps) {
+ super(props);
+ this._mainCont = React.createRef();
+ }
+
+ componentDidMount = () => {
+ let selected = this.props.document.selected;
+ if (!BoolCast(selected)) {
+ runInAction(() => {
+ this._backgroundColor = "red";
+ this._display = "none";
+ });
+ }
+ if (selected) {
+ if (BoolCast(selected)) {
+ runInAction(() => {
+ this._backgroundColor = "green";
+ this._display = "initial";
+ });
+ }
+ else {
+ runInAction(() => {
+ this._backgroundColor = "red";
+ this._display = "none";
+ });
+ }
+ }
+ else {
+ runInAction(() => {
+ this._backgroundColor = "red";
+ this._display = "none";
+ });
+ }
+ }
+
+ @action
+ pointerDown = (e: React.PointerEvent) => {
+ let selected = this.props.document.selected;
+ if (selected && BoolCast(selected)) {
+ this._backgroundColor = "red";
+ this._display = "none";
+ this.props.document.selected = false;
+ }
+ else {
+ this._backgroundColor = "green";
+ this._display = "initial";
+ this.props.document.selected = true;
+ }
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ @action
+ doubleClick = (e: React.MouseEvent) => {
+ if (this._mainCont.current) {
+ let annotations = DocListCast(this.props.parent.props.parent.Document.annotations);
+ if (annotations && annotations.length) {
+ let index = annotations.indexOf(this.props.document);
+ annotations.splice(index, 1);
+ this.props.parent.props.parent.Document.annotations = new List<Doc>(annotations);
+ }
+ // this._mainCont.current.childNodes.forEach(e => e.remove());
+ this._mainCont.current.style.display = "none";
+ // if (this._mainCont.current.parentElement) {
+ // this._mainCont.current.remove();
+ // }
+ }
+ e.stopPropagation();
+ }
+
+ render() {
+ let targetDoc = Cast(this.props.document.target, Doc);
+ if (targetDoc instanceof Doc) {
+ return (
+ <div className="pdfViewer-pinAnnotation" onPointerDown={this.pointerDown}
+ onDoubleClick={this.doubleClick} ref={this._mainCont}
+ style={{
+ top: this.props.y - PinRadius / 2, left: this.props.x - PinRadius / 2, width: PinRadius,
+ height: PinRadius, pointerEvents: "all", backgroundColor: this._backgroundColor
+ }}>
+ <div style={{
+ position: "absolute", top: "25px", left: "25px", transform: "scale(3)", transformOrigin: "top left",
+ display: this._display, width: targetDoc[WidthSym](), height: targetDoc[HeightSym]()
+ }}>
+ <DocumentView Document={targetDoc}
+ ContainingCollectionView={undefined}
+ ScreenToLocalTransform={this.props.parent.props.parent.props.ScreenToLocalTransform}
+ isTopMost={false}
+ ContentScaling={() => 1}
+ PanelWidth={() => NumCast(this.props.parent.props.parent.Document.nativeWidth)}
+ PanelHeight={() => NumCast(this.props.parent.props.parent.Document.nativeHeight)}
+ focus={emptyFunction}
+ selectOnLoad={true}
+ parentActive={this.props.parent.props.parent.props.active}
+ whenActiveChanged={this.props.parent.props.parent.props.whenActiveChanged}
+ bringToFront={emptyFunction}
+ addDocTab={this.props.parent.props.parent.props.addDocTab}
+ />
+ </div>
+ </div >
+ );
+ }
+ return null;
+ }
+}
+
+class RegionAnnotation extends React.Component<IAnnotationProps> {
+ @observable private _backgroundColor: string = "red";
+
+ onPointerDown = (e: React.PointerEvent) => {
+ let targetDoc = Cast(this.props.document.target, Doc, null);
+ if (targetDoc) {
+ DocumentManager.Instance.jumpToDocument(targetDoc);
+ }
+ }
+
+ render() {
+ return (
+ <div className="pdfViewer-annotationBox" onPointerDown={this.onPointerDown}
+ style={{ top: this.props.y, left: this.props.x, width: this.props.width, height: this.props.height, pointerEvents: "all", backgroundColor: this._backgroundColor }}></div>
+ );
+ }
+} \ No newline at end of file
diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx
new file mode 100644
index 000000000..fa3f7baca
--- /dev/null
+++ b/src/client/views/pdf/Page.tsx
@@ -0,0 +1,371 @@
+import { observer } from "mobx-react";
+import React = require("react");
+import { observable, action, runInAction, IReactionDisposer, reaction } from "mobx";
+import * as Pdfjs from "pdfjs-dist";
+import { Opt, Doc, FieldResult, Field, DocListCast, WidthSym, HeightSym } from "../../../new_fields/Doc";
+import "./PDFViewer.scss";
+import "pdfjs-dist/web/pdf_viewer.css";
+import { PDFBox } from "../nodes/PDFBox";
+import { DragManager } from "../../util/DragManager";
+import { Docs, DocUtils } from "../../documents/Documents";
+import { List } from "../../../new_fields/List";
+import { emptyFunction } from "../../../Utils";
+import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
+import { listSpec } from "../../../new_fields/Schema";
+import { menuBar } from "prosemirror-menu";
+import { AnnotationTypes } from "./PDFViewer";
+
+interface IPageProps {
+ pdf: Opt<Pdfjs.PDFDocumentProxy>;
+ name: string;
+ numPages: number;
+ page: number;
+ pageLoaded: (index: number, page: Pdfjs.PDFPageViewport) => void;
+ parent: PDFBox;
+ renderAnnotations: (annotations: Doc[], removeOld: boolean) => void;
+ makePin: (x: number, y: number, page: number) => void;
+ sendAnnotations: (annotations: HTMLDivElement[], page: number) => void;
+ receiveAnnotations: (page: number) => HTMLDivElement[] | undefined;
+ createAnnotation: (div: HTMLDivElement, page: number) => void;
+ makeAnnotationDocuments: (doc: Doc) => Doc;
+}
+
+@observer
+export default class Page extends React.Component<IPageProps> {
+ @observable private _state: string = "N/A";
+ @observable private _width: number = 0;
+ @observable private _height: number = 0;
+ @observable private _page: Opt<Pdfjs.PDFPageProxy>;
+ @observable private _currPage: number = this.props.page + 1;
+ @observable private _marqueeX: number = 0;
+ @observable private _marqueeY: number = 0;
+ @observable private _marqueeWidth: number = 0;
+ @observable private _marqueeHeight: number = 0;
+ @observable private _rotate: string = "";
+
+ private _canvas: React.RefObject<HTMLCanvasElement>;
+ private _textLayer: React.RefObject<HTMLDivElement>;
+ private _annotationLayer: React.RefObject<HTMLDivElement>;
+ private _marquee: React.RefObject<HTMLDivElement>;
+ private _curly: React.RefObject<HTMLImageElement>;
+ private _marqueeing: boolean = false;
+ private _dragging: boolean = false;
+ private _reactionDisposer?: IReactionDisposer;
+
+ constructor(props: IPageProps) {
+ super(props);
+ this._canvas = React.createRef();
+ this._textLayer = React.createRef();
+ this._annotationLayer = React.createRef();
+ this._marquee = React.createRef();
+ this._curly = React.createRef();
+ }
+
+ componentDidMount = (): void => {
+ if (this.props.pdf) {
+ this.update(this.props.pdf);
+ }
+ }
+
+ componentWillUnmount = (): void => {
+ if (this._reactionDisposer) {
+ this._reactionDisposer();
+ }
+ }
+
+ componentDidUpdate = (): void => {
+ if (this.props.pdf) {
+ this.update(this.props.pdf);
+ }
+ }
+
+ private update = (pdf: Pdfjs.PDFDocumentProxy): void => {
+ if (pdf) {
+ this.loadPage(pdf);
+ }
+ else {
+ this._state = "loading";
+ }
+ }
+
+ private loadPage = (pdf: Pdfjs.PDFDocumentProxy): void => {
+ if (this._state === "rendering" || this._page) return;
+
+ pdf.getPage(this._currPage).then(
+ (page: Pdfjs.PDFPageProxy): void => {
+ this._state = "rendering";
+ this.renderPage(page);
+ }
+ );
+ }
+
+ @action
+ private renderPage = (page: Pdfjs.PDFPageProxy): void => {
+ // lower scale = easier to read at small sizes, higher scale = easier to read at large sizes
+ let scale = 2;
+ let viewport = page.getViewport(scale);
+ let canvas = this._canvas.current;
+ let textLayer = this._textLayer.current;
+ if (canvas && textLayer) {
+ let ctx = canvas.getContext("2d");
+ canvas.width = viewport.width;
+ this._width = viewport.width;
+ canvas.height = viewport.height;
+ this._height = viewport.height;
+ this.props.pageLoaded(this._currPage, viewport);
+ if (ctx) {
+ // renders the page onto the canvas context
+ page.render({ canvasContext: ctx, viewport: viewport });
+ // renders text onto the text container
+ page.getTextContent().then((res: Pdfjs.TextContent): void => {
+ //@ts-ignore
+ Pdfjs.renderTextLayer({
+ textContent: res,
+ container: textLayer,
+ viewport: viewport
+ });
+ });
+
+ this._page = page;
+ }
+ }
+ }
+
+ /**
+ * This is temporary for creating annotations from highlights. It will
+ * start a drag event and create or put the necessary info into the drag event.
+ */
+ @action
+ startDrag = (e: PointerEvent): void => {
+ // the first 5 lines is a hack to prevent text selection while dragging
+ e.preventDefault();
+ e.stopPropagation();
+ if (this._dragging) {
+ return;
+ }
+ this._dragging = true;
+ let thisDoc = this.props.parent.Document;
+ // document that this annotation is linked to
+ let targetDoc = Docs.TextDocument({ width: 200, height: 200, title: "New Annotation" });
+ targetDoc.targetPage = this.props.page;
+ // creates annotation documents for current highlights
+ let annotationDoc = this.props.makeAnnotationDocuments(targetDoc);
+ let targetAnnotations = DocListCast(this.props.parent.Document.annotations);
+ if (targetAnnotations) {
+ targetAnnotations.push(annotationDoc);
+ this.props.parent.Document.annotations = new List<Doc>(targetAnnotations);
+ }
+ else {
+ this.props.parent.Document.annotations = new List<Doc>([annotationDoc]);
+ }
+ // create dragData and star tdrag
+ let dragData = new DragManager.AnnotationDragData(thisDoc, annotationDoc, targetDoc);
+ if (this._textLayer.current) {
+ DragManager.StartAnnotationDrag([this._textLayer.current], dragData, e.pageX, e.pageY, {
+ handlers: {
+ dragComplete: action(emptyFunction),
+ },
+ hideSource: false
+ });
+ }
+ }
+
+ // cleans up events and boolean
+ endDrag = (e: PointerEvent): void => {
+ document.removeEventListener("pointermove", this.startDrag);
+ document.removeEventListener("pointerup", this.endDrag);
+ this._dragging = false;
+ e.stopPropagation();
+ }
+
+ @action
+ onPointerDown = (e: React.PointerEvent): void => {
+ // if alt+left click, drag and annotate
+ if (e.altKey && e.button === 0) {
+ e.stopPropagation();
+
+ document.removeEventListener("pointermove", this.startDrag);
+ document.addEventListener("pointermove", this.startDrag);
+ document.removeEventListener("pointerup", this.endDrag);
+ document.addEventListener("pointerup", this.endDrag);
+ }
+ else if (e.button === 0) {
+ let target: any = e.target;
+ if (target && target.parentElement === this._textLayer.current) {
+ e.stopPropagation();
+ }
+ else {
+ // set marquee x and y positions to the spatially transformed position
+ let current = this._textLayer.current;
+ if (current) {
+ let boundingRect = current.getBoundingClientRect();
+ this._marqueeX = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width);
+ this._marqueeY = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height);
+ }
+ this._marqueeing = true;
+ if (this._marquee.current) this._marquee.current.style.opacity = "0.2";
+ }
+ document.removeEventListener("pointermove", this.onSelectStart);
+ document.addEventListener("pointermove", this.onSelectStart);
+ document.removeEventListener("pointerup", this.onSelectEnd);
+ document.addEventListener("pointerup", this.onSelectEnd);
+ if (!e.ctrlKey) {
+ this.props.sendAnnotations([], -1);
+ }
+ }
+ }
+
+ @action
+ onSelectStart = (e: PointerEvent): void => {
+ let target: any = e.target;
+ if (this._marqueeing) {
+ let current = this._textLayer.current;
+ if (current) {
+ // transform positions and find the width and height to set the marquee to
+ let boundingRect = current.getBoundingClientRect();
+ this._marqueeWidth = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width) - this._marqueeX;
+ this._marqueeHeight = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height) - this._marqueeY;
+ let { background, opacity, transform: transform } = this.getCurlyTransform();
+ if (this._marquee.current && this._curly.current) {
+ this._marquee.current.style.background = background;
+ this._curly.current.style.opacity = opacity;
+ this._rotate = transform;
+ }
+ }
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ else if (target && target.parentElement === this._textLayer.current) {
+ e.stopPropagation();
+ }
+ }
+
+ getCurlyTransform = (): { background: string, opacity: string, transform: string } => {
+ let background = "", opacity = "", transform = "";
+ if (this._marquee.current && this._curly.current) {
+ if (this._marqueeWidth > 100 && this._marqueeHeight > 100) {
+ background = "red";
+ opacity = "0";
+ }
+ else {
+ background = "transparent";
+ opacity = "1";
+ }
+
+ // split up for simplicity, could be done in a nested ternary. please do not. -syip2
+ let ratio = this._marqueeWidth / this._marqueeHeight;
+ if (ratio > 1.5) {
+ // vertical
+ transform = "rotate(90deg) scale(1, 5)";
+ }
+ else if (ratio < 0.5) {
+ // horizontal
+ transform = "scale(2, 1)";
+ }
+ else {
+ // diagonal
+ transform = "rotate(45deg) scale(1.5, 1.5)";
+ }
+ }
+ return { background: background, opacity: opacity, transform: transform };
+ }
+
+ @action
+ onSelectEnd = (): void => {
+ if (this._marqueeing) {
+ this._marqueeing = false;
+ if (this._marquee.current) {
+ let copy = document.createElement("div");
+ // make a copy of the marquee
+ copy.style.left = this._marquee.current.style.left;
+ copy.style.top = this._marquee.current.style.top;
+ copy.style.width = this._marquee.current.style.width;
+ copy.style.height = this._marquee.current.style.height;
+
+ // apply the appropriate background, opacity, and transform
+ let { background, opacity, transform } = this.getCurlyTransform();
+ copy.style.background = background;
+ // if curly bracing, add a curly brace
+ if (opacity === "1" && this._curly.current) {
+ copy.style.opacity = opacity;
+ let img = this._curly.current.cloneNode();
+ (img as any).style.opacity = opacity;
+ (img as any).style.transform = transform;
+ copy.appendChild(img);
+ }
+ else {
+ copy.style.opacity = this._marquee.current.style.opacity;
+ }
+ copy.className = this._marquee.current.className;
+ this.props.createAnnotation(copy, this.props.page);
+ this._marquee.current.style.opacity = "0";
+ }
+
+ this._marqueeHeight = this._marqueeWidth = 0;
+ }
+ else {
+ let sel = window.getSelection();
+ // if selecting over a range of things
+ if (sel && sel.type === "Range") {
+ let clientRects = sel.getRangeAt(0).getClientRects();
+ if (this._textLayer.current) {
+ let boundingRect = this._textLayer.current.getBoundingClientRect();
+ for (let i = 0; i < clientRects.length; i++) {
+ let rect = clientRects.item(i);
+ if (rect) {
+ let annoBox = document.createElement("div");
+ annoBox.className = "pdfViewer-annotationBox";
+ // transforms the positions from screen onto the pdf div
+ annoBox.style.top = ((rect.top - boundingRect.top) * (this._textLayer.current.offsetHeight / boundingRect.height)).toString();
+ annoBox.style.left = ((rect.left - boundingRect.left) * (this._textLayer.current.offsetWidth / boundingRect.width)).toString();
+ annoBox.style.width = (rect.width * this._textLayer.current.offsetWidth / boundingRect.width).toString();
+ annoBox.style.height = (rect.height * this._textLayer.current.offsetHeight / boundingRect.height).toString();
+ this.props.createAnnotation(annoBox, this.props.page);
+ }
+ }
+ }
+ // clear selection
+ if (sel.empty) { // Chrome
+ sel.empty();
+ } else if (sel.removeAllRanges) { // Firefox
+ sel.removeAllRanges();
+ }
+ }
+ }
+ document.removeEventListener("pointermove", this.onSelectStart);
+ document.removeEventListener("pointerup", this.onSelectEnd);
+ }
+
+ doubleClick = (e: React.MouseEvent) => {
+ let target: any = e.target;
+ // if double clicking text
+ if (target && target.parentElement === this._textLayer.current) {
+ // do something to select the paragraph ideally
+ }
+
+ let current = this._textLayer.current;
+ if (current) {
+ let boundingRect = current.getBoundingClientRect();
+ let x = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width);
+ let y = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height);
+ this.props.makePin(x, y, this.props.page);
+ }
+ }
+
+ render() {
+ return (
+ <div onPointerDown={this.onPointerDown} onDoubleClick={this.doubleClick} className={"page-cont"} style={{ "width": this._width, "height": this._height }}>
+ <div className="canvasContainer">
+ <canvas ref={this._canvas} />
+ </div>
+ <div className="pdfInkingLayer-cont" ref={this._annotationLayer} style={{ width: "100%", height: "100%", position: "relative", top: "-100%" }}>
+ <div className="pdfViewer-annotationBox" ref={this._marquee}
+ style={{ left: `${this._marqueeX}px`, top: `${this._marqueeY}px`, width: `${this._marqueeWidth}px`, height: `${this._marqueeHeight}px`, background: "transparent" }}>
+ <img ref={this._curly} src="https://static.thenounproject.com/png/331760-200.png" style={{ width: "100%", height: "100%", transform: `${this._rotate}` }} />
+ </div>
+ </div>
+ <div className="textlayer" ref={this._textLayer} style={{ "position": "relative", "top": `-${2 * this._height}px`, "height": `${this._height}px` }} />
+ </div>
+ );
+ }
+}
diff --git a/src/server/Search.ts b/src/server/Search.ts
index 5ca5578a7..fd6ef36a6 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -7,6 +7,7 @@ export class Search {
private url = 'http://localhost:8983/solr/';
public async updateDocument(document: any) {
+ return;
try {
const res = await rp.post(this.url + "dash/update", {
headers: { 'content-type': 'application/json' },
@@ -14,7 +15,7 @@ export class Search {
});
return res;
} catch (e) {
- console.warn("Search error: " + e + document);
+ // console.warn("Search error: " + e + document);
}
}
diff --git a/src/server/index.ts b/src/server/index.ts
index eda1ab422..e22794df1 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -7,6 +7,7 @@ import * as expressValidator from 'express-validator';
import * as formidable from 'formidable';
import * as fs from 'fs';
import * as sharp from 'sharp';
+import * as Pdfjs from 'pdfjs-dist';
const imageDataUri = require('image-data-uri');
import * as mobileDetect from 'mobile-detect';
import * as passport from 'passport';
@@ -27,6 +28,7 @@ import { MessageStore, Transferable, Types, Diff } from "./Message";
import { RouteStore } from './RouteStore';
const app = express();
const config = require('../../webpack.config');
+import { createCanvas, loadImage, Canvas } from "canvas";
const compiler = webpack(config);
const port = 1050; // default port to listen
const serverPort = 4321;
@@ -167,7 +169,31 @@ addSecureRoute(
RouteStore.getCurrUser
);
+class NodeCanvasFactory {
+ create = (width: number, height: number) => {
+ var canvas = createCanvas(width, height);
+ var context = canvas.getContext('2d');
+ return {
+ canvas: canvas,
+ context: context,
+ };
+ }
+
+ reset = (canvasAndContext: any, width: number, height: number) => {
+ canvasAndContext.canvas.width = width;
+ canvasAndContext.canvas.height = height;
+ }
+
+ destroy = (canvasAndContext: any) => {
+ canvasAndContext.canvas.width = 0;
+ canvasAndContext.canvas.height = 0;
+ canvasAndContext.canvas = null;
+ canvasAndContext.context = null;
+ }
+}
+
const pngTypes = [".png", ".PNG"];
+const pdfTypes = [".pdf", ".PDF"];
const jpgTypes = [".jpg", ".JPG", ".jpeg", ".JPEG"];
const uploadDir = __dirname + "/public/files/";
// SETTERS
@@ -202,6 +228,38 @@ app.post(
});
isImage = true;
}
+ else if (pdfTypes.includes(ext)) {
+ Pdfjs.getDocument(uploadDir + file).promise
+ .then((pdf: Pdfjs.PDFDocumentProxy) => {
+ let numPages = pdf.numPages;
+ let factory = new NodeCanvasFactory();
+ for (let pageNum = 0; pageNum < numPages; pageNum++) {
+ console.log(pageNum);
+ pdf.getPage(pageNum + 1).then((page: Pdfjs.PDFPageProxy) => {
+ console.log("reading " + pageNum);
+ let viewport = page.getViewport(1);
+ let canvasAndContext = factory.create(viewport.width, viewport.height);
+ let renderContext = {
+ canvasContext: canvasAndContext.context,
+ viewport: viewport,
+ canvasFactory: factory
+ }
+ console.log("read " + pageNum);
+
+ page.render(renderContext).promise
+ .then(() => {
+ console.log("saving " + pageNum);
+ let stream = canvasAndContext.canvas.createPNGStream();
+ let out = fs.createWriteStream(uploadDir + file.substring(0, file.length - ext.length) + `-${pageNum + 1}.PNG`);
+ stream.pipe(out);
+ out.on("finish", () => console.log(`Success! Saved to ${uploadDir + file.substring(0, file.length - ext.length) + `-${pageNum + 1}.PNG`}`));
+ }, (reason: string) => {
+ console.error(reason + ` ${pageNum}`);
+ });
+ });
+ }
+ });
+ }
if (isImage) {
resizers.forEach(resizer => {
fs.createReadStream(uploadDir + file).pipe(resizer.resizer).pipe(fs.createWriteStream(uploadDir + file.substring(0, file.length - ext.length) + resizer.suffix + ext));
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 20:45:22 +0000