From 7c6de7a2875fb8967231d1f6857a1f1e4b49d412 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 6 Mar 2019 12:30:28 -0500 Subject: fixed to work analogous to images --- src/client/documents/Documents.ts | 12 ++-- src/client/views/Main.tsx | 4 +- .../views/collections/CollectionFreeFormView.tsx | 5 +- src/client/views/nodes/ImageBox.tsx | 14 ++-- src/client/views/nodes/PDFNode.tsx | 79 ++++++++++++---------- 5 files changed, 65 insertions(+), 49 deletions(-) (limited to 'src') 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(); - let pdfRef = React.createRef(); + let pdfRef = React.createRef(); let webRef = React.createRef(); let textRef = React.createRef(); let schemaRef = React.createRef(); 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) : ( { 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 { } + @action + setScaling = (r: any) => { + this.props.doc.SetNumber(KeyStore.NativeWidth, r.entry.width); + this.props.doc.SetNumber(KeyStore.NativeHeight, r.entry.height); + } render() { return (
{ - { - 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") - - } - - }) + + {({ measureRef }) => +
+ { + 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)] - } - } + } + /> +
} - /> +
); -- cgit v1.2.3-70-g09d2