aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts12
-rw-r--r--src/client/views/Main.tsx4
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx5
-rw-r--r--src/client/views/nodes/ImageBox.tsx14
-rw-r--r--src/client/views/nodes/PDFNode.tsx79
5 files changed, 65 insertions, 49 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 94e1cb8dd..d2183c90f 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -40,8 +40,9 @@ export namespace Documents {
let webProto: Document;
let collProto: Document;
let kvpProto: Document;
+ let pdfProto: Document;
const textProtoId = "textProto";
- const pdfProtoId = "textProto";
+ const pdfProtoId = "pdfProto";
const imageProtoId = "imageProto";
const webProtoId = "webProto";
const collProtoId = "collectionProto";
@@ -96,9 +97,12 @@ export namespace Documents {
{ x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] });
}
function GetPdfPrototype(): Document {
- return textProto ? textProto :
- textProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", PDFNode.LayoutString(),
- { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] });
+ if (!pdfProto) {
+ pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionView.LayoutString("AnnotationsKey"),
+ { x: 0, y: 0, nativeWidth: 300, nativeHeight: 300, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] });
+ pdfProto.SetText(KeyStore.BackgroundLayout, PDFNode.LayoutString());
+ }
+ return pdfProto;
}
function GetWebPrototype(): Document {
return webProto ? webProto :
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index bbf315052..abacb258e 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -51,7 +51,7 @@ Documents.initProtos(mainDocId, (res?: Document) => {
}
let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg";
- let pdfurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"
+ let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"
let weburl = "https://cs.brown.edu/courses/cs166/";
let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
@@ -66,7 +66,7 @@ Documents.initProtos(mainDocId, (res?: Document) => {
);
let imgRef = React.createRef<HTMLDivElement>();
- let pdfRef = React.createRef<HTMLDivElement>();
+ let pdfRef = React.createRef<HTMLDivElement>();
let webRef = React.createRef<HTMLDivElement>();
let textRef = React.createRef<HTMLDivElement>();
let schemaRef = React.createRef<HTMLDivElement>();
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 1a7349201..285d515cd 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -15,6 +15,7 @@ import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocum
import { DocumentView } from "../nodes/DocumentView";
import { FormattedTextBox } from "../nodes/FormattedTextBox";
import { ImageBox } from "../nodes/ImageBox";
+import { PDFNode } from "../nodes/PDFNode";
import { WebBox } from "../nodes/WebBox";
import { KeyValueBox } from "../nodes/KeyValueBox"
import "./CollectionFreeFormView.scss";
@@ -246,7 +247,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
get backgroundView() {
return !this.backgroundLayout ? (null) :
(<JsxParser
- components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
+ components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox, PDFNode }}
bindings={this.props.bindings}
jsx={this.backgroundLayout}
showWarnings={true}
@@ -257,7 +258,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
get overlayView() {
return !this.overlayLayout ? (null) :
(<JsxParser
- components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox }}
+ components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox, PDFNode }}
bindings={this.props.bindings}
jsx={this.overlayLayout}
showWarnings={true}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 8c44395f4..30910fb1f 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,15 +1,15 @@
+import { action, observable } from 'mobx';
+import { observer } from "mobx-react";
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import "./ImageBox.scss";
-import React = require("react")
-import { ImageField } from '../../../fields/ImageField';
-import { FieldViewProps, FieldView } from './FieldView';
import { FieldWaiting } from '../../../fields/Field';
-import { observer } from "mobx-react"
-import { ContextMenu } from "../../views/ContextMenu";
-import { observable, action } from 'mobx';
+import { ImageField } from '../../../fields/ImageField';
import { KeyStore } from '../../../fields/KeyStore';
+import { ContextMenu } from "../../views/ContextMenu";
+import { FieldView, FieldViewProps } from './FieldView';
+import "./ImageBox.scss";
+import React = require("react")
@observer
export class ImageBox extends React.Component<FieldViewProps> {
diff --git a/src/client/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx
index 8f29e8b4d..4749ed101 100644
--- a/src/client/views/nodes/PDFNode.tsx
+++ b/src/client/views/nodes/PDFNode.tsx
@@ -1,17 +1,17 @@
+import { action, observable } from 'mobx';
+import { observer } from "mobx-react";
+import Measure from "react-measure";
import 'react-image-lightbox/style.css';
-import "./ImageBox.scss";
-import React = require("react")
-import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
-import 'react-pdf/dist/Page/AnnotationLayer.css'
//@ts-ignore
-import { Document, Page, PDFPageProxy, PageAnnotation } from "react-pdf";
+import { Document, Page } from "react-pdf";
+import 'react-pdf/dist/Page/AnnotationLayer.css';
import { Utils } from '../../../Utils';
-import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
import { Annotation } from './Annotation';
-import { ObjectPositionProperty } from 'csstype';
-import { keydownHandler } from 'prosemirror-keymap';
-import { FieldViewProps, FieldView } from './FieldView';
+import { FieldView, FieldViewProps } from './FieldView';
+import "./ImageBox.scss";
+import { Sticky } from './Sticky'; //you should look at sticky and annotation, because they are used here
+import React = require("react")
+import { KeyStore } from '../../../fields/KeyStore';
/** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
* This method renders PDF and puts all kinds of functionalities such as annotation, highlighting,
@@ -390,6 +390,11 @@ export class PDFNode extends React.Component<FieldViewProps> {
}
+ @action
+ setScaling = (r: any) => {
+ this.props.doc.SetNumber(KeyStore.NativeWidth, r.entry.width);
+ this.props.doc.SetNumber(KeyStore.NativeHeight, r.entry.height);
+ }
render() {
return (
<div ref={this._mainDiv}
@@ -418,32 +423,38 @@ export class PDFNode extends React.Component<FieldViewProps> {
<button ref={this._colorTool} onPointerDown={this.onColorChange}>{"Black"}</button>
<Document file={window.origin + "/corsProxy/https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"}>
- <Page
- pageNumber={this.page}
- onLoadSuccess={
- (page: any) => {
- if (this._mainDiv.current) {
- this._mainDiv.current.childNodes.forEach((element) => {
- if (element.nodeName == "DIV") {
- element.childNodes[0].childNodes.forEach((e) => {
-
- if (e instanceof HTMLCanvasElement) {
- this._pdfCanvas = e;
- this._pdfContext = e.getContext("2d")
-
- }
-
- })
+ <Measure onResize={this.setScaling}>
+ {({ measureRef }) =>
+ <div className="collectionSchemaView-content" ref={measureRef}>
+ <Page
+ pageNumber={this.page}
+ onLoadSuccess={
+ (page: any) => {
+ if (this._mainDiv.current) {
+ this._mainDiv.current.childNodes.forEach((element) => {
+ if (element.nodeName == "DIV") {
+ element.childNodes[0].childNodes.forEach((e) => {
+
+ if (e instanceof HTMLCanvasElement) {
+ this._pdfCanvas = e;
+ this._pdfContext = e.getContext("2d")
+
+ }
+
+ })
+ }
+ })
+ }
+ this.numPage = page.transport.numPages
+ if (this.perPage.length == 0) { //Makes sure it only runs once
+ this.perPage = [...Array(this.numPage)]
+ }
}
- })
- }
- this.numPage = page.transport.numPages
- if (this.perPage.length == 0) { //Makes sure it only runs once
- this.perPage = [...Array(this.numPage)]
- }
- }
+ }
+ />
+ </div>
}
- />
+ </Measure>
</Document>
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 03:54:16 +0000