From c4eff83d814b1f9b94b7fc75ca06e8f0474de20d Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 8 Mar 2019 11:44:28 -0500
Subject: working version of pdfs with annotations.

---
 .../views/collections/CollectionFreeFormView.scss  |  2 +-
 .../views/collections/CollectionFreeFormView.tsx   | 32 +++++----
 src/client/views/collections/CollectionPDFView.tsx | 74 ++++++++++++++++++++
 src/client/views/collections/CollectionView.tsx    | 78 +++++++++++++---------
 4 files changed, 139 insertions(+), 47 deletions(-)
 create mode 100644 src/client/views/collections/CollectionPDFView.tsx

(limited to 'src/client/views/collections')

diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index f496517f5..b059163ed 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -34,7 +34,7 @@
         
     border-style: solid;
     box-sizing: border-box;
-    position: relative;
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 74e70ef33..782313e55 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -12,6 +12,7 @@ import { undoBatch } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionView } from "../collections/CollectionView";
+import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { InkingCanvas } from "../InkingCanvas";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentView } from "../nodes/DocumentView";
@@ -224,21 +225,24 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @computed
     get views() {
+        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
         const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
         if (lvalue && lvalue != FieldWaiting) {
             return lvalue.Data.map(doc => {
-                return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
-                    AddDocument={this.props.addDocument}
-                    RemoveDocument={this.props.removeDocument}
-                    ScreenToLocalTransform={this.getTransform}
-                    isTopMost={false}
-                    SelectOnLoad={doc.Id === this._selectOnLoaded}
-                    ContentScaling={this.noScaling}
-                    PanelWidth={doc.Width}
-                    PanelHeight={doc.Height}
-                    ContainingCollectionView={this.props.CollectionView}
-                    focus={this.focusDocument}
-                />);
+                var page = doc.GetNumber(KeyStore.Page, 0);
+                return (page != curPage && page != 0) ? (null) :
+                    (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
+                        AddDocument={this.props.addDocument}
+                        RemoveDocument={this.props.removeDocument}
+                        ScreenToLocalTransform={this.getTransform}
+                        isTopMost={false}
+                        SelectOnLoad={doc.Id === this._selectOnLoaded}
+                        ContentScaling={this.noScaling}
+                        PanelWidth={doc.Width}
+                        PanelHeight={doc.Height}
+                        ContainingCollectionView={this.props.CollectionView}
+                        focus={this.focusDocument}
+                    />);
             })
         }
         return null;
@@ -248,7 +252,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get backgroundView() {
         return !this.backgroundLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox, PDFBox }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, WebBox, KeyValueBox, PDFBox }}
                 bindings={this.props.bindings}
                 jsx={this.backgroundLayout}
                 showWarnings={true}
@@ -259,7 +263,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     get overlayView() {
         return !this.overlayLayout ? (null) :
             (<JsxParser
-                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox, PDFBox }}
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, WebBox, KeyValueBox, PDFBox }}
                 bindings={this.props.bindings}
                 jsx={this.overlayLayout}
                 showWarnings={true}
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
new file mode 100644
index 000000000..90da43921
--- /dev/null
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -0,0 +1,74 @@
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { SelectionManager } from "../../util/SelectionManager";
+import { ContextMenu } from "../ContextMenu";
+import React = require("react");
+import { KeyStore } from "../../../fields/KeyStore";
+import { NumberField } from "../../../fields/NumberField";
+import { CollectionFreeFormView } from "./CollectionFreeFormView";
+import { CollectionDockingView } from "./CollectionDockingView";
+import { CollectionSchemaView } from "./CollectionSchemaView";
+import { CollectionViewProps } from "./CollectionViewBase";
+import { CollectionTreeView } from "./CollectionTreeView";
+import { Field } from "../../../fields/Field";
+import { CollectionViewType, CollectionView } from "./CollectionView";
+import { JSXElement } from "babel-types";
+
+
+@observer
+export class CollectionPDFView extends React.Component<CollectionViewProps> {
+
+    public static LayoutString(fieldKey: string = "DataKey") {
+        return `<${CollectionPDFView.name} Document={Document}
+                    ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
+                    isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
+    }
+
+    @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0;
+    @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0;
+
+    @computed private get curPage() { return this.props.Document.GetNumber(KeyStore.CurPage, 0); }
+    @computed private get numPages() { return this.props.Document.GetNumber(KeyStore.NumPages, 0); }
+    @computed private get uIButtons() {
+        return (
+            <div className="pdfBox-buttonTray" key="tray">
+                <button className="pdfButton" onClick={this.onPageBack}>{"<"}</button>
+                <button className="pdfButton" onClick={this.onPageForward}>{">"}</button>
+            </div>);
+    }
+
+    // CollectionView API starts here...
+
+    public active: () => boolean = () => CollectionView.Active(this);
+
+    @action
+    addDocument = (doc: Document): void => {
+        doc.SetNumber(KeyStore.Page, this.curPage);
+        CollectionView.AddDocument(this.props, doc);
+    }
+
+    @action removeDocument = (doc: Document): boolean => {
+        return CollectionView.RemoveDocument(this.props, doc);
+    }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        if (!e.isPropagationStopped) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+            ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { } })
+        }
+    }
+
+    get collectionViewType(): CollectionViewType { return CollectionViewType.Freeform; }
+
+
+    @computed
+    get subView(): any { return CollectionView.SubView(this); }
+
+    render() {
+        return (<div className="collectionView-cont" onContextMenu={this.specificContextMenu}>
+            {this.subView}
+            {this.props.isSelected() ? this.uIButtons : (null)}
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 8d175ee35..504538e85 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,4 +1,4 @@
-import { action } from "mobx";
+import { action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
@@ -28,32 +28,42 @@ export const COLLECTION_BORDER_WIDTH = 2;
 export class CollectionView extends React.Component<CollectionViewProps> {
 
     public static LayoutString(fieldKey: string = "DataKey") {
-        return `<CollectionView Document={Document}
+        return `<${CollectionView.name} Document={Document}
                     ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
                     isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
     }
-    public active = () => {
-        var isSelected = this.props.isSelected();
-        var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
-        var topMost = this.props.isTopMost;
+
+    public active: () => boolean = () => CollectionView.Active(this);
+
+    public static Active(self: CollectionView): boolean {
+        var isSelected = self.props.isSelected();
+        var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == self);
+        var topMost = self.props.isTopMost;
         return isSelected || childSelected || topMost;
     }
-    @action
+
     addDocument = (doc: Document): void => {
-        if (this.props.Document.Get(this.props.fieldKey) instanceof Field) {
+        CollectionView.AddDocument(this.props, doc);
+    }
+    removeDocument = (doc: Document): boolean => {
+        return CollectionView.RemoveDocument(this.props, doc);
+    }
+
+    @action
+    public static AddDocument(props: CollectionViewProps, doc: Document) {
+        if (props.Document.Get(props.fieldKey) instanceof Field) {
             //TODO This won't create the field if it doesn't already exist
-            const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+            const value = props.Document.GetData(props.fieldKey, ListField, new Array<Document>())
             value.push(doc);
         } else {
-            this.props.Document.SetData(this.props.fieldKey, [doc], ListField);
+            props.Document.SetData(props.fieldKey, [doc], ListField);
         }
     }
 
-
     @action
-    removeDocument = (doc: Document): boolean => {
+    public static RemoveDocument(props: CollectionViewProps, doc: Document): boolean {
         //TODO This won't create the field if it doesn't already exist
-        const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+        const value = props.Document.GetData(props.fieldKey, ListField, new Array<Document>())
         let index = -1;
         for (let i = 0; i < value.length; i++) {
             if (value[i].Id == doc.Id) {
@@ -98,36 +108,40 @@ export class CollectionView extends React.Component<CollectionViewProps> {
         }
     }
 
-    render() {
-        let viewType = this.collectionViewType;
-        let subView: JSX.Element;
+    @computed
+    get subView() { return CollectionView.SubView(this); }
+
+    public static SubView(self: CollectionView) {
+        let viewType = self.collectionViewType;
+        let subView = (null);
         switch (viewType) {
             case CollectionViewType.Freeform:
-                subView = (<CollectionFreeFormView {...this.props}
-                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
-                    CollectionView={this} />)
+                subView = (<CollectionFreeFormView {...self.props}
+                    addDocument={self.addDocument} removeDocument={self.removeDocument} active={self.active}
+                    CollectionView={self} />)
                 break;
             case CollectionViewType.Schema:
-                subView = (<CollectionSchemaView {...this.props}
-                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
-                    CollectionView={this} />)
+                subView = (<CollectionSchemaView {...self.props}
+                    addDocument={self.addDocument} removeDocument={self.removeDocument} active={self.active}
+                    CollectionView={self} />)
                 break;
             case CollectionViewType.Docking:
-                subView = (<CollectionDockingView {...this.props}
-                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
-                    CollectionView={this} />)
+                subView = (<CollectionDockingView {...self.props}
+                    addDocument={self.addDocument} removeDocument={self.removeDocument} active={self.active}
+                    CollectionView={self} />)
                 break;
             case CollectionViewType.Tree:
-                subView = (<CollectionTreeView {...this.props}
-                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
-                    CollectionView={this} />)
-                break;
-            default:
-                subView = <div></div>
+                subView = (<CollectionTreeView {...self.props}
+                    addDocument={self.addDocument} removeDocument={self.removeDocument} active={self.active}
+                    CollectionView={self} />)
                 break;
         }
+        return subView;
+    }
+
+    render() {
         return (<div className="collectionView-cont" onContextMenu={this.specificContextMenu}>
-            {subView}
+            {this.subView}
         </div>)
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2