From e5a14d6dddccc922bb253323b461ac2500c33b7c Mon Sep 17 00:00:00 2001 From: Eleanor Eng 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 { @@ -81,13 +82,21 @@ export class ImageBox extends React.Component { } } + //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 ( -
+
Image not found {this.lightbox(path)}
) -- cgit v1.2.3-70-g09d2 From 8772cc68e850653af72dbd9aced73d529900173b Mon Sep 17 00:00:00 2001 From: Eleanor Eng 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(fieldKey, []); @@ -116,7 +125,7 @@ export class CollectionSchemaView extends CollectionViewBase { content =
} return ( -
+
{ 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 { } } - //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 { } render() { - return (
) + return (
) } } \ 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 { } } - //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 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(); - 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