From e5a14d6dddccc922bb253323b461ac2500c33b7c Mon Sep 17 00:00:00 2001
From: Eleanor Eng <eleanoreng@eleanors-mbp.devices.brown.edu>
Date: Tue, 19 Feb 2019 18:24:41 -0500
Subject: Different options based on selection

---
 src/client/views/nodes/ImageBox.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 60be5f94d..f363487c3 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -11,6 +11,7 @@ import { FieldWaiting } from '../../../fields/Field';
 import { observer } from "mobx-react"
 import { observable, action, spy } from 'mobx';
 import { KeyStore } from '../../../fields/Key';
+import { ContextMenu } from "../../views/ContextMenu";
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
@@ -81,13 +82,21 @@ export class ImageBox extends React.Component<FieldViewProps> {
         }
     }
 
+    //REPLACE THIS WITH CAPABILITIES SPECIFC TO THIS TYPE OF NODE
+    imageCapability = (e: React.MouseEvent): void => {
+    }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        ContextMenu.Instance.addItem({ description: "Image Capability", event: this.imageCapability });
+    }
+
     render() {
         let field = this.props.doc.Get(this.props.fieldKey);
         let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
             field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
 
         return (
-            <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
+            <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} onContextMenu={this.specificContextMenu}>
                 <img src={path} width="100%" alt="Image not found" />
                 {this.lightbox(path)}
             </div>)
-- 
cgit v1.2.3-70-g09d2


From 8772cc68e850653af72dbd9aced73d529900173b Mon Sep 17 00:00:00 2001
From: Eleanor Eng <eleanoreng@eleanors-mbp.devices.brown.edu>
Date: Mon, 25 Feb 2019 18:24:46 -0500
Subject: No wrapping

---
 src/client/views/ContextMenu.scss                   | 21 +++++++++++++++------
 .../views/collections/CollectionSchemaView.tsx      | 11 ++++++++++-
 src/client/views/collections/CollectionViewBase.tsx | 11 ++++++++++-
 src/client/views/nodes/FormattedTextBox.tsx         | 11 +++--------
 src/client/views/nodes/ImageBox.tsx                 |  2 +-
 5 files changed, 39 insertions(+), 17 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 2ac5d3b52..c810aef3e 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -4,14 +4,15 @@
     z-index: 1000;
     box-shadow: #AAAAAA .2vw .2vw .4vw;
     flex-direction: column; //E
+    // border-radius: 20px;
 }
 
 .contextMenu-item {
-    width: 10vw;
-    height: 4vh;
-    background: #DDDDDD;
+    width: auto; //10vw
+    height: auto; //4vh
+    background: #F0F8FF; // background: #DDDDDD;
     display: flex;
-    justify-content: center;
+    justify-content: left; //center
     align-items: center;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -20,11 +21,17 @@
     -ms-user-select: none;
     user-select: none;
     transition: all .1s;
+    border-width: .11px;
+    border-color: rgb(187, 186, 186);
+    border-bottom-style: solid;
+    border-top-style: none;
+    padding: 10px;
+    white-space: nowrap;
 }
 
 .contextMenu-item:hover {
     transition: all .1s;
-    background: #AAAAAA
+    background: #B0E0E6; // background: #AAAAAA
 }
 
 .contextMenu-description {
@@ -34,5 +41,7 @@
 }
 
 #mySearch {
-    font-size: 1.4vw;
+    font-size: 1.5vw;
+    border-left-style: none;
+    border-right-style: none;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 331c4f6fe..d924cb163 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -15,6 +15,7 @@ import { KeyStore as KS, Key } from "../../../fields/Key";
 import { Document } from "../../../fields/Document";
 import { Field } from "../../../fields/Field";
 import { Transform } from "../../util/Transform";
+import { ContextMenu } from "../ContextMenu";
 
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
@@ -98,6 +99,14 @@ export class CollectionSchemaView extends CollectionViewBase {
         }
     }
 
+    //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
+    collectionCapability = (e: React.MouseEvent): void => {
+    }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        ContextMenu.Instance.addItem({ description: "Collection Capability", event: this.collectionCapability });
+    }
+
     render() {
         const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props;
         const children = Document.GetList<Document>(fieldKey, []);
@@ -116,7 +125,7 @@ export class CollectionSchemaView extends CollectionViewBase {
             content = <div />
         }
         return (
-            <div onPointerDown={this.onPointerDown} >
+            <div onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu}>
                 <SplitPane split={"vertical"} defaultSize="60%">
                     <ScrollBox>
                         <ReactTable
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index eea7908ce..7ee010ec6 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -27,8 +27,17 @@ export const COLLECTION_BORDER_WIDTH = 2;
 export class CollectionViewBase extends React.Component<CollectionViewProps> {
 
     public static LayoutString(collectionType: string) {
-        return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
+        return `<${collectionType} onContextMenu={this.specificContextMenu} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
     }
+
+    //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
+    collectionCapability = (e: React.MouseEvent): void => {
+    }
+
+    specificContextMenu = (e: React.MouseEvent): void => {
+        ContextMenu.Instance.addItem({ description: "Collection Capability", event: this.collectionCapability });
+    }
+
     @computed
     public get active(): boolean {
         var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 0fe6befda..23eca4e24 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -116,7 +116,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         }
     }
 
-    //REPLACE THIS WITH CAPABILITIES SPECIFC TO THIS TYPE OF NODE
+    //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
     textCapability = (e: React.MouseEvent): void => {
     }
 
@@ -125,12 +125,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     }
 
     render() {
-        return (<div className="formattedTextBox-cont"
-            style={{
-                color: "initial",
-                whiteSpace: "initial"
-            }}
-            onPointerDown={this.onPointerDown}
-            ref={this._ref} onContextMenu={this.specificContextMenu} />)
+        return (<div className="formattedTextBox-cont" style={{ color: "initial", whiteSpace: "initial" }}
+            onPointerDown={this.onPointerDown} ref={this._ref} onContextMenu={this.specificContextMenu} />)
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index f363487c3..0f10ef0ef 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -82,7 +82,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
         }
     }
 
-    //REPLACE THIS WITH CAPABILITIES SPECIFC TO THIS TYPE OF NODE
+    //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
     imageCapability = (e: React.MouseEvent): void => {
     }
 
-- 
cgit v1.2.3-70-g09d2


From 7c6de7a2875fb8967231d1f6857a1f1e4b49d412 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
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/client/views/nodes/ImageBox.tsx')

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>
         );
-- 
cgit v1.2.3-70-g09d2

