From ae13268a5ce2fa5074773651c9215393cda21f11 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Wed, 6 Mar 2019 02:46:09 -0500 Subject: Fixed rendering things --- src/client/views/nodes/DocumentView.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e01e1d4cd..1f928a3d6 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -18,6 +18,7 @@ import { ImageBox } from "../nodes/ImageBox"; import { Documents } from "../../documents/Documents" import { KeyValueBox } from "./KeyValueBox" import { WebBox } from "../nodes/WebBox"; +import { PDFNode } from "../nodes/PDFNode"; import "./DocumentView.scss"; import React = require("react"); const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? @@ -194,7 +195,7 @@ export class DocumentView extends React.Component { } @computed get mainContent() { return Date: Fri, 8 Mar 2019 09:21:18 -0500 Subject: merged with master --- src/client/documents/Documents.ts | 5 +- src/client/util/DragManager.ts | 6 +- .../views/collections/CollectionFreeFormView.tsx | 16 +- src/client/views/nodes/DocumentView.tsx | 4 +- src/client/views/nodes/PDFBox.scss | 15 + src/client/views/nodes/PDFBox.tsx | 515 +++++++++++++++++++++ src/client/views/nodes/PDFNode.scss | 15 - src/client/views/nodes/PDFNode.tsx | 515 --------------------- 8 files changed, 544 insertions(+), 547 deletions(-) create mode 100644 src/client/views/nodes/PDFBox.scss create mode 100644 src/client/views/nodes/PDFBox.tsx delete mode 100644 src/client/views/nodes/PDFNode.scss delete mode 100644 src/client/views/nodes/PDFNode.tsx (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 47b8ea844..f73823603 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -14,9 +14,8 @@ import { HtmlField } from "../../fields/HtmlField"; import { Key } from "../../fields/Key" import { Field } from "../../fields/Field"; import { KeyValueBox } from "../views/nodes/KeyValueBox" -import { KVPField } from "../../fields/KVPField"; import { PDFField } from "../../fields/PDFField"; -import { PDFNode } from "../views/nodes/PDFNode"; +import { PDFBox } from "../views/nodes/PDFBox"; export interface DocumentOptions { x?: number; @@ -100,7 +99,7 @@ export namespace Documents { if (!pdfProto) { pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionView.LayoutString("AnnotationsKey"), { x: 0, y: 0, nativeWidth: 600, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] }); - pdfProto.SetText(KeyStore.BackgroundLayout, PDFNode.LayoutString()); + pdfProto.SetText(KeyStore.BackgroundLayout, PDFBox.LayoutString()); } return pdfProto; } diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index a7af399e2..513a6ac9e 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -124,15 +124,15 @@ export namespace DragManager { // So we replace the pdf's canvas with the image thumbnail const docView: DocumentView = dragData["documentView"]; const doc: Document = docView ? docView.props.Document : dragData["document"]; - var pdfNode = dragElement.getElementsByClassName("pdfNode-cont")[0] as HTMLElement; + var pdfBox = dragElement.getElementsByClassName("pdfBox-cont")[0] as HTMLElement; let thumbnail = doc.GetT(KeyStore.Thumbnail, ImageField); - if (pdfNode && pdfNode.childElementCount && thumbnail) { + if (pdfBox && pdfBox.childElementCount && thumbnail) { let img = new Image(); img!.src = thumbnail.toString(); img!.style.position = "absolute"; img!.style.width = `${rect.width / scaleX}px`; img!.style.height = `${rect.height / scaleY}px`; - pdfNode.replaceChild(img!, pdfNode.children[0]) + pdfBox.replaceChild(img!, pdfBox.children[0]) } dragDiv.appendChild(dragElement); diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 86d9a10e3..74e70ef33 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -1,30 +1,28 @@ -import { observable, action, computed } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { FieldWaiting } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; import { TextField } from "../../../fields/TextField"; +import { Documents } from "../../documents/Documents"; import { DragManager } from "../../util/DragManager"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionView } from "../collections/CollectionView"; +import { InkingCanvas } from "../InkingCanvas"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DocumentView } from "../nodes/DocumentView"; import { FormattedTextBox } from "../nodes/FormattedTextBox"; import { ImageBox } from "../nodes/ImageBox"; -import { PDFNode } from "../nodes/PDFNode"; +import { KeyValueBox } from "../nodes/KeyValueBox"; +import { PDFBox } from "../nodes/PDFBox"; import { WebBox } from "../nodes/WebBox"; -import { KeyValueBox } from "../nodes/KeyValueBox" import "./CollectionFreeFormView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; -import { Documents } from "../../documents/Documents"; -import { InkingCanvas } from "../InkingCanvas"; -import { InkingControl } from "../InkingControl"; -import { InkTool } from "../../../fields/InkField"; import React = require("react"); const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @@ -250,7 +248,7 @@ export class CollectionFreeFormView extends CollectionViewBase { get backgroundView() { return !this.backgroundLayout ? (null) : ( { } @computed get mainContent() { return { + public static LayoutString() { return FieldView.LayoutString(PDFBox); } + + private _mainDiv = React.createRef() + private _pdf = React.createRef(); + + //very useful for keeping track of X and y position throughout the PDF Canvas + private initX: number = 0; + private initY: number = 0; + + //checks if tool is on + private _toolOn: boolean = false; //checks if tool is on + private _pdfContext: any = null; //gets pdf context + private bool: Boolean = false; //general boolean debounce + private currSpan: any;//keeps track of current span (for highlighting) + + private _currTool: any; //keeps track of current tool button reference + private _drawToolOn: boolean = false; //boolean that keeps track of the drawing tool + private _drawTool = React.createRef()//drawing tool button reference + + private _colorTool = React.createRef(); //color button reference + private _currColor: string = "black"; //current color that user selected (for ink/pen) + + private _highlightTool = React.createRef(); //highlighter button reference + private _highlightToolOn: boolean = false; + private _pdfCanvas: any; + + @observable private _perPageInfo: Object[] = []; //stores pageInfo + @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno + + @observable private _currAnno: any = [] + @observable private _page: number = 1; //default is the first page. + @observable private _numPages: number = 1; //default number of pages + @observable private _interactive: boolean = false; + @observable private _loaded: boolean = false; + + /** + * for pagination backwards + */ + @action + onPageBack = () => { + if (this._page > 1) { + this._page -= 1; + this._currAnno = []; + this._perPageInfo[this._page] = this._pageInfo + this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default + if (this._perPageInfo[this._page - 1]) { + this._pageInfo = this._perPageInfo[this._page - 1]; + } + this.saveThumbnail(); + } + } + + /** + * for pagination forwards + */ + @action + onPageForward = () => { + if (this._page < this._numPages) { + this._page += 1; + this._currAnno = []; + this._perPageInfo[this._page - 2] = this._pageInfo; + this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default + if (this._perPageInfo[this._page - 1]) { + this._pageInfo = this._perPageInfo[this._page - 1]; + } + this.saveThumbnail(); + } + } + + /** + * selection tool used for area highlighting (stickies). Kinda temporary + */ + selectionTool = () => { + this._toolOn = true; + } + /** + * when user draws on the canvas. When mouse pointer is down + */ + drawDown = (e: PointerEvent) => { + this.initX = e.offsetX; + this.initY = e.offsetY; + this._pdfContext.beginPath(); + this._pdfContext.lineTo(this.initX, this.initY); + this._pdfContext.strokeStyle = this._currColor; + this._pdfCanvas.addEventListener("pointermove", this.drawMove); + this._pdfCanvas.addEventListener("pointerup", this.drawUp); + + } + //when user drags + drawMove = (e: PointerEvent): void => { + //x and y mouse movement + let x = this.initX += e.movementX, + y = this.initY += e.movementY; + //connects the point + this._pdfContext.lineTo(x, y); + this._pdfContext.stroke(); + } + + drawUp = (e: PointerEvent) => { + this._pdfContext.closePath(); + this._pdfCanvas.removeEventListener("pointermove", this.drawMove); + this._pdfCanvas.removeEventListener("pointerdown", this.drawDown); + this._pdfCanvas.addEventListener("pointerdown", this.drawDown); + } + + + /** + * highlighting helper function + */ + makeEditableAndHighlight = (colour: string) => { + var range, sel = window.getSelection(); + if (sel.rangeCount && sel.getRangeAt) { + range = sel.getRangeAt(0); + } + document.designMode = "on"; + if (!document.execCommand("HiliteColor", false, colour)) { + document.execCommand("HiliteColor", false, colour); + } + + if (range) { + sel.removeAllRanges(); + sel.addRange(range); + + let obj: Object = { parentDivs: [], spans: [] }; + //@ts-ignore + if (range.commonAncestorContainer.className == 'react-pdf__Page__textContent') { //multiline highlighting case + obj = this.highlightNodes(range.commonAncestorContainer.childNodes) + } else { //single line highlighting case + let parentDiv = range.commonAncestorContainer.parentElement + if (parentDiv) { + if (parentDiv.className == 'react-pdf__Page__textContent') { //when highlight is overwritten + obj = this.highlightNodes(parentDiv.childNodes) + } else { + parentDiv.childNodes.forEach((child) => { + if (child.nodeName == 'SPAN') { + //@ts-ignore + obj.parentDivs.push(parentDiv) + //@ts-ignore + child.id = "highlighted" + //@ts-ignore + obj.spans.push(child) + child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler + } + }) + } + } + } + this._pageInfo.divs.push(obj); + + } + document.designMode = "off"; + } + + highlightNodes = (nodes: NodeListOf) => { + let temp = { parentDivs: [], spans: [] } + nodes.forEach((div) => { + div.childNodes.forEach((child) => { + if (child.nodeName == 'SPAN') { + //@ts-ignore + temp.parentDivs.push(div) + //@ts-ignore + child.id = "highlighted" + //@ts-ignore + temp.spans.push(child) + child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler + } + }) + + }) + return temp; + } + + /** + * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES + */ + @action + onEnter = (e: any) => { + let span: HTMLSpanElement = e.toElement; + let index: any; + this._pageInfo.divs.forEach((obj: any) => { + obj.spans.forEach((element: any) => { + if (element == span) { + if (!index) { + index = this._pageInfo.divs.indexOf(obj); + } + } + }) + }) + + if (this._pageInfo.anno.length >= index + 1) { + if (this._currAnno.length == 0) { + this._currAnno.push(this._pageInfo.anno[index]); + } + } else { + if (this._currAnno.length == 0) { //if there are no current annotation + let div = span.offsetParent; + //@ts-ignore + let divX = div.style.left + //@ts-ignore + let divY = div.style.top + //slicing "px" from the end + divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span) + divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span) + let annotation = + this._pageInfo.anno.push(annotation); + this._currAnno.push(annotation); + } + } + + } + + /** + * highlight function for highlighting actual text. This works fine. + */ + highlight = (color: string) => { + if (window.getSelection()) { + try { + if (!document.execCommand("hiliteColor", false, color)) { + this.makeEditableAndHighlight(color); + } + } catch (ex) { + this.makeEditableAndHighlight(color) + } + } + } + + /** + * controls the area highlighting (stickies) Kinda temporary + */ + onPointerDown = (e: React.PointerEvent) => { + if (this._toolOn) { + let mouse = e.nativeEvent; + this.initX = mouse.offsetX; + this.initY = mouse.offsetY; + + } + } + + /** + * controls area highlighting and partially highlighting. Kinda temporary + */ + @action + onPointerUp = (e: React.PointerEvent) => { + if (this._highlightToolOn) { + this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color. + this._highlightToolOn = false; + } + if (this._toolOn) { + let mouse = e.nativeEvent; + let finalX = mouse.offsetX; + let finalY = mouse.offsetY; + let width = Math.abs(finalX - this.initX); //width + let height = Math.abs(finalY - this.initY); //height + + //these two if statements are bidirectional dragging. You can drag from any point to another point and generate sticky + if (finalX < this.initX) { + this.initX = finalX; + } + if (finalY < this.initY) { + this.initY = finalY; + } + + if (this._mainDiv.current) { + let sticky = + this._pageInfo.area.push(sticky); + } + this._toolOn = false; + } + this._interactive = true; + } + + /** + * starts drawing the line when user presses down. + */ + onDraw = () => { + if (this._currTool != null) { + this._currTool.style.backgroundColor = "grey"; + } + + if (this._drawTool.current) { + this._currTool = this._drawTool.current; + if (this._drawToolOn) { + this._drawToolOn = false; + this._pdfCanvas.removeEventListener("pointerdown", this.drawDown); + this._pdfCanvas.removeEventListener("pointerup", this.drawUp); + this._pdfCanvas.removeEventListener("pointermove", this.drawMove); + this._drawTool.current.style.backgroundColor = "grey"; + } else { + this._drawToolOn = true; + this._pdfCanvas.addEventListener("pointerdown", this.drawDown); + this._drawTool.current.style.backgroundColor = "cyan"; + } + } + } + + + /** + * for changing color (for ink/pen) + */ + onColorChange = (e: React.PointerEvent) => { + if (e.currentTarget.innerHTML == "Red") { + this._currColor = "red"; + } else if (e.currentTarget.innerHTML == "Blue") { + this._currColor = "blue"; + } else if (e.currentTarget.innerHTML == "Green") { + this._currColor = "green"; + } else if (e.currentTarget.innerHTML == "Black") { + this._currColor = "black"; + } + + } + + + /** + * For highlighting (text drag highlighting) + */ + onHighlight = () => { + this._drawToolOn = false; + if (this._currTool != null) { + this._currTool.style.backgroundColor = "grey"; + } + if (this._highlightTool.current) { + this._currTool = this._drawTool.current; + if (this._highlightToolOn) { + this._highlightToolOn = false; + this._highlightTool.current.style.backgroundColor = "grey"; + } else { + this._highlightToolOn = true; + this._highlightTool.current.style.backgroundColor = "orange"; + } + } + } + + + + + @action + saveThumbnail = () => { + setTimeout(() => { + var me = this; + htmlToImage.toPng(this._mainDiv.current!, + { width: me.props.doc.GetNumber(KeyStore.NativeWidth, 0), height: me.props.doc.GetNumber(KeyStore.NativeHeight, 0), quality: 0.5 }) + .then(function (dataUrl: string) { + me.props.doc.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField); + }) + .catch(function (error: any) { + console.error('oops, something went wrong!', error); + }); + }, 1000); + } + + @action + onLoaded = (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._numPages = page._transport.numPages; + if (this._perPageInfo.length == 0) { //Makes sure it only runs once + this._perPageInfo = [...Array(this._numPages)] + } + this._loaded = true; + } + + @action + setScaling = (r: any) => { + // bcz: the nativeHeight should really be set when the document is imported. + // also, the native dimensions could be different for different pages of the PDF + // so this design is flawed. + var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0); + if (!this.props.doc.GetNumber(KeyStore.NativeHeight, 0)) { + this.props.doc.SetNumber(KeyStore.NativeHeight, nativeWidth * r.entry.height / r.entry.width); + } + if (!this.props.doc.GetT(KeyStore.Thumbnail, ImageField)) { + this.saveThumbnail(); + } + } + + @computed + get uIButtons() { + return ( +
+ + + + + + + + + +
); + } + + @computed + get pdfContent() { + const renderHeight = 2400; + let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); + let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; + return
+ + + {({ measureRef }) => +
+ +
+ } + + +
; + } + + @computed + get pdfRenderer() { + let proxy = this._loaded ? (null) : this.imageProxyRenderer; + let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); + if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) { + return proxy; + } + return [ + this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element), + this._currAnno.map((element: any) => element), + this.uIButtons, +
+ {this.pdfContent} + {proxy} +
+ ]; + } + + @computed + get imageProxyRenderer() { + let field = this.props.doc.Get(KeyStore.Thumbnail); + if (field) { + let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : + field instanceof ImageField ? field.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg"; + return ; + } + return (null); + } + + render() { + return ( +
+ {this.pdfRenderer} +
+ ); + } + +} \ No newline at end of file diff --git a/src/client/views/nodes/PDFNode.scss b/src/client/views/nodes/PDFNode.scss deleted file mode 100644 index 18ebca952..000000000 --- a/src/client/views/nodes/PDFNode.scss +++ /dev/null @@ -1,15 +0,0 @@ -.react-pdf__Page { - transform-origin: left top; - position: absolute; -} -.react-pdf__Document { - position: absolute; -} -.pdfNode-buttonTray { - position:absolute; - z-index: 25; -} -.pdfNode-contentContainer { - position: absolute; - transform-origin: "left top"; -} \ No newline at end of file diff --git a/src/client/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx deleted file mode 100644 index 648bd3e62..000000000 --- a/src/client/views/nodes/PDFNode.tsx +++ /dev/null @@ -1,515 +0,0 @@ -import { action, observable, _interceptReads, computed } from 'mobx'; -import { observer } from "mobx-react"; -import Measure from "react-measure"; -import 'react-image-lightbox/style.css'; -//@ts-ignore -import { Document, Page } from "react-pdf"; -import 'react-pdf/dist/Page/AnnotationLayer.css'; -import { Utils } from '../../../Utils'; -import { Annotation } from './Annotation'; -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'; -import "./PDFNode.scss"; -import { PDFField } from '../../../fields/PDFField'; -import { FieldWaiting } from '../../../fields/Field'; -import { ImageField } from '../../../fields/ImageField'; -import * as htmlToImage from "html-to-image"; -import { url } from 'inspector'; - -/** ALSO LOOK AT: Annotation.tsx, Sticky.tsx - * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, - * area selection (I call it stickies), embedded ink node for directly annotating using a pen or - * mouse, and pagination. - * - * - * HOW TO USE: - * AREA selection: - * 1) Click on Area button. - * 2) click on any part of the PDF, and drag to get desired sized area shape - * 3) You can write on the area (hence the reason why it's called sticky) - * 4) to make another area, you need to click on area button AGAIN. - * - * HIGHLIGHT: (Buggy. No multiline/multidiv text highlighting for now...) - * 1) just click and drag on a text - * 2) click highlight - * 3) for annotation, just pull your cursor over to that text - * 4) another method: click on highlight first and then drag on your desired text - * 5) To make another highlight, you need to reclick on the button - * - * Draw: - * 1) click draw and select color. then just draw like there's no tomorrow. - * 2) once you finish drawing your masterpiece, just reclick on the draw button to end your drawing session. - * - * Pagination: - * 1) click on arrows. You'll notice that stickies will stay in those page. But... highlights won't. - * 2) to test this out, make few area/stickies and then click on next page then come back. You'll see that they are all saved. - * - * - * written by: Andrew Kim - */ -@observer -export class PDFNode extends React.Component { - public static LayoutString() { return FieldView.LayoutString(PDFNode); } - - private _mainDiv = React.createRef() - private _pdf = React.createRef(); - - //very useful for keeping track of X and y position throughout the PDF Canvas - private initX: number = 0; - private initY: number = 0; - - //checks if tool is on - private _toolOn: boolean = false; //checks if tool is on - private _pdfContext: any = null; //gets pdf context - private bool: Boolean = false; //general boolean debounce - private currSpan: any;//keeps track of current span (for highlighting) - - private _currTool: any; //keeps track of current tool button reference - private _drawToolOn: boolean = false; //boolean that keeps track of the drawing tool - private _drawTool = React.createRef()//drawing tool button reference - - private _colorTool = React.createRef(); //color button reference - private _currColor: string = "black"; //current color that user selected (for ink/pen) - - private _highlightTool = React.createRef(); //highlighter button reference - private _highlightToolOn: boolean = false; - private _pdfCanvas: any; - - @observable private _perPageInfo: Object[] = []; //stores pageInfo - @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno - - @observable private _currAnno: any = [] - @observable private _page: number = 1; //default is the first page. - @observable private _numPages: number = 1; //default number of pages - @observable private _interactive: boolean = false; - @observable private _loaded: boolean = false; - - /** - * for pagination backwards - */ - @action - onPageBack = () => { - if (this._page > 1) { - this._page -= 1; - this._currAnno = []; - this._perPageInfo[this._page] = this._pageInfo - this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default - if (this._perPageInfo[this._page - 1]) { - this._pageInfo = this._perPageInfo[this._page - 1]; - } - this.saveThumbnail(); - } - } - - /** - * for pagination forwards - */ - @action - onPageForward = () => { - if (this._page < this._numPages) { - this._page += 1; - this._currAnno = []; - this._perPageInfo[this._page - 2] = this._pageInfo; - this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default - if (this._perPageInfo[this._page - 1]) { - this._pageInfo = this._perPageInfo[this._page - 1]; - } - this.saveThumbnail(); - } - } - - /** - * selection tool used for area highlighting (stickies). Kinda temporary - */ - selectionTool = () => { - this._toolOn = true; - } - /** - * when user draws on the canvas. When mouse pointer is down - */ - drawDown = (e: PointerEvent) => { - this.initX = e.offsetX; - this.initY = e.offsetY; - this._pdfContext.beginPath(); - this._pdfContext.lineTo(this.initX, this.initY); - this._pdfContext.strokeStyle = this._currColor; - this._pdfCanvas.addEventListener("pointermove", this.drawMove); - this._pdfCanvas.addEventListener("pointerup", this.drawUp); - - } - //when user drags - drawMove = (e: PointerEvent): void => { - //x and y mouse movement - let x = this.initX += e.movementX, - y = this.initY += e.movementY; - //connects the point - this._pdfContext.lineTo(x, y); - this._pdfContext.stroke(); - } - - drawUp = (e: PointerEvent) => { - this._pdfContext.closePath(); - this._pdfCanvas.removeEventListener("pointermove", this.drawMove); - this._pdfCanvas.removeEventListener("pointerdown", this.drawDown); - this._pdfCanvas.addEventListener("pointerdown", this.drawDown); - } - - - /** - * highlighting helper function - */ - makeEditableAndHighlight = (colour: string) => { - var range, sel = window.getSelection(); - if (sel.rangeCount && sel.getRangeAt) { - range = sel.getRangeAt(0); - } - document.designMode = "on"; - if (!document.execCommand("HiliteColor", false, colour)) { - document.execCommand("HiliteColor", false, colour); - } - - if (range) { - sel.removeAllRanges(); - sel.addRange(range); - - let obj: Object = { parentDivs: [], spans: [] }; - //@ts-ignore - if (range.commonAncestorContainer.className == 'react-pdf__Page__textContent') { //multiline highlighting case - obj = this.highlightNodes(range.commonAncestorContainer.childNodes) - } else { //single line highlighting case - let parentDiv = range.commonAncestorContainer.parentElement - if (parentDiv) { - if (parentDiv.className == 'react-pdf__Page__textContent') { //when highlight is overwritten - obj = this.highlightNodes(parentDiv.childNodes) - } else { - parentDiv.childNodes.forEach((child) => { - if (child.nodeName == 'SPAN') { - //@ts-ignore - obj.parentDivs.push(parentDiv) - //@ts-ignore - child.id = "highlighted" - //@ts-ignore - obj.spans.push(child) - child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler - } - }) - } - } - } - this._pageInfo.divs.push(obj); - - } - document.designMode = "off"; - } - - highlightNodes = (nodes: NodeListOf) => { - let temp = { parentDivs: [], spans: [] } - nodes.forEach((div) => { - div.childNodes.forEach((child) => { - if (child.nodeName == 'SPAN') { - //@ts-ignore - temp.parentDivs.push(div) - //@ts-ignore - child.id = "highlighted" - //@ts-ignore - temp.spans.push(child) - child.addEventListener("mouseover", this.onEnter); //adds mouseover annotation handler - } - }) - - }) - return temp; - } - - /** - * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES - */ - @action - onEnter = (e: any) => { - let span: HTMLSpanElement = e.toElement; - let index: any; - this._pageInfo.divs.forEach((obj: any) => { - obj.spans.forEach((element: any) => { - if (element == span) { - if (!index) { - index = this._pageInfo.divs.indexOf(obj); - } - } - }) - }) - - if (this._pageInfo.anno.length >= index + 1) { - if (this._currAnno.length == 0) { - this._currAnno.push(this._pageInfo.anno[index]); - } - } else { - if (this._currAnno.length == 0) { //if there are no current annotation - let div = span.offsetParent; - //@ts-ignore - let divX = div.style.left - //@ts-ignore - let divY = div.style.top - //slicing "px" from the end - divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span) - divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span) - let annotation = - this._pageInfo.anno.push(annotation); - this._currAnno.push(annotation); - } - } - - } - - /** - * highlight function for highlighting actual text. This works fine. - */ - highlight = (color: string) => { - if (window.getSelection()) { - try { - if (!document.execCommand("hiliteColor", false, color)) { - this.makeEditableAndHighlight(color); - } - } catch (ex) { - this.makeEditableAndHighlight(color) - } - } - } - - /** - * controls the area highlighting (stickies) Kinda temporary - */ - onPointerDown = (e: React.PointerEvent) => { - if (this._toolOn) { - let mouse = e.nativeEvent; - this.initX = mouse.offsetX; - this.initY = mouse.offsetY; - - } - } - - /** - * controls area highlighting and partially highlighting. Kinda temporary - */ - @action - onPointerUp = (e: React.PointerEvent) => { - if (this._highlightToolOn) { - this.highlight("rgba(76, 175, 80, 0.3)"); //highlights to this default color. - this._highlightToolOn = false; - } - if (this._toolOn) { - let mouse = e.nativeEvent; - let finalX = mouse.offsetX; - let finalY = mouse.offsetY; - let width = Math.abs(finalX - this.initX); //width - let height = Math.abs(finalY - this.initY); //height - - //these two if statements are bidirectional dragging. You can drag from any point to another point and generate sticky - if (finalX < this.initX) { - this.initX = finalX; - } - if (finalY < this.initY) { - this.initY = finalY; - } - - if (this._mainDiv.current) { - let sticky = - this._pageInfo.area.push(sticky); - } - this._toolOn = false; - } - this._interactive = true; - } - - /** - * starts drawing the line when user presses down. - */ - onDraw = () => { - if (this._currTool != null) { - this._currTool.style.backgroundColor = "grey"; - } - - if (this._drawTool.current) { - this._currTool = this._drawTool.current; - if (this._drawToolOn) { - this._drawToolOn = false; - this._pdfCanvas.removeEventListener("pointerdown", this.drawDown); - this._pdfCanvas.removeEventListener("pointerup", this.drawUp); - this._pdfCanvas.removeEventListener("pointermove", this.drawMove); - this._drawTool.current.style.backgroundColor = "grey"; - } else { - this._drawToolOn = true; - this._pdfCanvas.addEventListener("pointerdown", this.drawDown); - this._drawTool.current.style.backgroundColor = "cyan"; - } - } - } - - - /** - * for changing color (for ink/pen) - */ - onColorChange = (e: React.PointerEvent) => { - if (e.currentTarget.innerHTML == "Red") { - this._currColor = "red"; - } else if (e.currentTarget.innerHTML == "Blue") { - this._currColor = "blue"; - } else if (e.currentTarget.innerHTML == "Green") { - this._currColor = "green"; - } else if (e.currentTarget.innerHTML == "Black") { - this._currColor = "black"; - } - - } - - - /** - * For highlighting (text drag highlighting) - */ - onHighlight = () => { - this._drawToolOn = false; - if (this._currTool != null) { - this._currTool.style.backgroundColor = "grey"; - } - if (this._highlightTool.current) { - this._currTool = this._drawTool.current; - if (this._highlightToolOn) { - this._highlightToolOn = false; - this._highlightTool.current.style.backgroundColor = "grey"; - } else { - this._highlightToolOn = true; - this._highlightTool.current.style.backgroundColor = "orange"; - } - } - } - - - - - @action - saveThumbnail = () => { - setTimeout(() => { - var me = this; - htmlToImage.toPng(this._mainDiv.current!, - { width: me.props.doc.GetNumber(KeyStore.NativeWidth, 0), height: me.props.doc.GetNumber(KeyStore.NativeHeight, 0), quality: 0.5 }) - .then(function (dataUrl: string) { - me.props.doc.SetData(KeyStore.Thumbnail, new URL(dataUrl), ImageField); - }) - .catch(function (error: any) { - console.error('oops, something went wrong!', error); - }); - }, 1000); - } - - @action - onLoaded = (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._numPages = page.transport.numPages - if (this._perPageInfo.length == 0) { //Makes sure it only runs once - this._perPageInfo = [...Array(this._numPages)] - } - this._loaded = true; - } - - @action - setScaling = (r: any) => { - // bcz: the nativeHeight should really be set when the document is imported. - // also, the native dimensions could be different for different pages of the PDF - // so this design is flawed. - var nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 0); - if (!this.props.doc.GetNumber(KeyStore.NativeHeight, 0)) { - this.props.doc.SetNumber(KeyStore.NativeHeight, nativeWidth * r.entry.height / r.entry.width); - } - if (!this.props.doc.GetT(KeyStore.Thumbnail, ImageField)) { - this.saveThumbnail(); - } - } - - @computed - get uIButtons() { - return ( -
- - - - - - - - - -
); - } - - @computed - get pdfContent() { - const renderHeight = 2400; - let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); - let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; - return
- - - {({ measureRef }) => -
- -
- } - - -
; - } - - @computed - get pdfRenderer() { - let proxy = this._loaded ? (null) : this.imageProxyRenderer; - let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); - if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) { - return proxy; - } - return [ - this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element), - this._currAnno.map((element: any) => element), - this.uIButtons, -
- {this.pdfContent} - {proxy} -
- ]; - } - - @computed - get imageProxyRenderer() { - let field = this.props.doc.Get(KeyStore.Thumbnail); - if (field) { - let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : - field instanceof ImageField ? field.Data.href : "http://cs.brown.edu/people/bcz/prairie.jpg"; - return ; - } - return (null); - } - - render() { - return ( -
- {this.pdfRenderer} -
- ); - } - -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From c4eff83d814b1f9b94b7fc75ca06e8f0474de20d Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 8 Mar 2019 11:44:28 -0500 Subject: working version of pdfs with annotations. --- src/client/documents/Documents.ts | 4 +- src/client/views/InkingCanvas.tsx | 17 ++-- .../views/collections/CollectionFreeFormView.scss | 2 +- .../views/collections/CollectionFreeFormView.tsx | 32 +++---- src/client/views/collections/CollectionPDFView.tsx | 74 +++++++++++++++++ src/client/views/collections/CollectionView.tsx | 78 ++++++++++------- src/client/views/nodes/DocumentView.tsx | 3 +- src/client/views/nodes/PDFBox.tsx | 97 ++++++++-------------- src/fields/InkField.ts | 1 + src/fields/KeyStore.ts | 3 + 10 files changed, 193 insertions(+), 118 deletions(-) create mode 100644 src/client/views/collections/CollectionPDFView.tsx (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index f73823603..fb1c3d867 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -16,6 +16,7 @@ import { Field } from "../../fields/Field"; import { KeyValueBox } from "../views/nodes/KeyValueBox" import { PDFField } from "../../fields/PDFField"; import { PDFBox } from "../views/nodes/PDFBox"; +import { CollectionPDFView } from "../views/collections/CollectionPDFView"; export interface DocumentOptions { x?: number; @@ -97,8 +98,9 @@ export namespace Documents { } function GetPdfPrototype(): Document { if (!pdfProto) { - pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionView.LayoutString("AnnotationsKey"), + pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("AnnotationsKey"), { x: 0, y: 0, nativeWidth: 600, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations] }); + pdfProto.SetNumber(KeyStore.Page, 1); pdfProto.SetText(KeyStore.BackgroundLayout, PDFBox.LayoutString()); } return pdfProto; diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index baf1567b7..14a779837 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -66,7 +66,8 @@ export class InkingCanvas extends React.Component { pathData: [point], color: InkingControl.Instance.selectedColor, width: InkingControl.Instance.selectedWidth, - tool: InkingControl.Instance.selectedTool + tool: InkingControl.Instance.selectedTool, + page: this.props.Document.GetNumber(KeyStore.CurPage, 0) }); this.inkData = data; this._isDrawing = true; @@ -137,15 +138,17 @@ export class InkingCanvas extends React.Component { // parse data from server let paths: Array = [] + let curPage = this.props.Document.GetNumber(KeyStore.CurPage, 0) Array.from(lines).map(item => { let id = item[0]; let strokeData = item[1]; - paths.push() + if (strokeData.page == 0 || strokeData.page == curPage) + paths.push() }) return ( 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>(this.props.fieldKey, ListField); if (lvalue && lvalue != FieldWaiting) { return lvalue.Data.map(doc => { - return (); + var page = doc.GetNumber(KeyStore.Page, 0); + return (page != curPage && page != 0) ? (null) : + (); }) } return null; @@ -248,7 +252,7 @@ export class CollectionFreeFormView extends CollectionViewBase { get backgroundView() { return !this.backgroundLayout ? (null) : ( { + + 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 ( +
+ + +
); + } + + // 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 (
+ {this.subView} + {this.props.isSelected() ? this.uIButtons : (null)} +
) + } +} \ 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 { public static LayoutString(fieldKey: string = "DataKey") { - return ``; } - 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()) + const value = props.Document.GetData(props.fieldKey, ListField, new Array()) 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()) + const value = props.Document.GetData(props.fieldKey, ListField, new Array()) 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 { } } - 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 = () + subView = () break; case CollectionViewType.Schema: - subView = () + subView = () break; case CollectionViewType.Docking: - subView = () + subView = () break; case CollectionViewType.Tree: - subView = () - break; - default: - subView =
+ subView = () break; } + return subView; + } + + render() { return (
- {subView} + {this.subView}
) } } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 20526c256..41e93df35 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -12,6 +12,7 @@ import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; import { CollectionSchemaView } from "../collections/CollectionSchemaView"; import { CollectionView, CollectionViewType } from "../collections/CollectionView"; +import { CollectionPDFView } from "../collections/CollectionPDFView"; import { ContextMenu } from "../ContextMenu"; import { FormattedTextBox } from "../nodes/FormattedTextBox"; import { ImageBox } from "../nodes/ImageBox"; @@ -195,7 +196,7 @@ export class DocumentView extends React.Component { } @computed get mainContent() { return { //very useful for keeping track of X and y position throughout the PDF Canvas private initX: number = 0; private initY: number = 0; + private initPage: boolean = false; //checks if tool is on private _toolOn: boolean = false; //checks if tool is on @@ -77,47 +77,36 @@ export class PDFBox extends React.Component { private _highlightTool = React.createRef(); //highlighter button reference private _highlightToolOn: boolean = false; private _pdfCanvas: any; + private _reactionDisposer: Opt; @observable private _perPageInfo: Object[] = []; //stores pageInfo @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno @observable private _currAnno: any = [] - @observable private _page: number = 1; //default is the first page. - @observable private _numPages: number = 1; //default number of pages @observable private _interactive: boolean = false; @observable private _loaded: boolean = false; - /** - * for pagination backwards - */ - @action - onPageBack = () => { - if (this._page > 1) { - this._page -= 1; - this._currAnno = []; - this._perPageInfo[this._page] = this._pageInfo - this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default - if (this._perPageInfo[this._page - 1]) { - this._pageInfo = this._perPageInfo[this._page - 1]; - } - this.saveThumbnail(); - } + @computed private get curPage() { return this.props.doc.GetNumber(KeyStore.CurPage, 0); } + + componentDidMount() { + this._reactionDisposer = reaction( + () => this.curPage, + () => { + if (this.curPage && this.initPage) { + this.saveThumbnail(); + this._interactive = true; + } else { + if (this.curPage) + this.initPage = true; + } + }, + { fireImmediately: true }); + } - /** - * for pagination forwards - */ - @action - onPageForward = () => { - if (this._page < this._numPages) { - this._page += 1; - this._currAnno = []; - this._perPageInfo[this._page - 2] = this._pageInfo; - this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default - if (this._perPageInfo[this._page - 1]) { - this._pageInfo = this._perPageInfo[this._page - 1]; - } - this.saveThumbnail(); + componentWillUnmount() { + if (this._reactionDisposer) { + this._reactionDisposer(); } } @@ -386,8 +375,6 @@ export class PDFBox extends React.Component { } - - @action saveThumbnail = () => { setTimeout(() => { @@ -420,9 +407,11 @@ export class PDFBox extends React.Component { } }) } - this._numPages = page._transport.numPages; + + // bcz: the number of pages should really be set when the document is imported. + this.props.doc.SetNumber(KeyStore.NumPages, page._transport.numPages); if (this._perPageInfo.length == 0) { //Makes sure it only runs once - this._perPageInfo = [...Array(this._numPages)] + this._perPageInfo = [...Array(page._transport.numPages)] } this._loaded = true; } @@ -441,24 +430,9 @@ export class PDFBox extends React.Component { } } - @computed - get uIButtons() { - return ( -
- - - - - - - - - -
); - } - @computed get pdfContent() { + const page = this.curPage; const renderHeight = 2400; let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; @@ -467,7 +441,7 @@ export class PDFBox extends React.Component { {({ measureRef }) =>
- +
} @@ -485,7 +459,6 @@ export class PDFBox extends React.Component { return [ this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element), this._currAnno.map((element: any) => element), - this.uIButtons,
{this.pdfContent} {proxy} diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts index a475e2aae..1108a04a5 100644 --- a/src/fields/InkField.ts +++ b/src/fields/InkField.ts @@ -13,6 +13,7 @@ export interface StrokeData { color: string; width: string; tool: InkTool; + page: number; } export type StrokeMap = Map; diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index 259d1acaf..f67257093 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -4,6 +4,7 @@ export namespace KeyStore { export const Prototype = new Key("Prototype"); export const X = new Key("X"); export const Y = new Key("Y"); + export const Page = new Key("Page"); export const Title = new Key("Title"); export const Author = new Key("Author"); export const PanX = new Key("PanX"); @@ -27,5 +28,7 @@ export namespace KeyStore { export const ActiveFrame = new Key("ActiveFrame"); export const DocumentText = new Key("DocumentText"); export const Thumbnail = new Key("Thumbnail"); + export const CurPage = new Key("CurPage"); + export const NumPages = new Key("NumPages"); export const Ink = new Key("Ink"); } -- cgit v1.2.3-70-g09d2 From b9cfa458a6535e7ee0ff8b81398afa1e123cf458 Mon Sep 17 00:00:00 2001 From: Andrew Kim Date: Sat, 9 Mar 2019 18:21:06 -0500 Subject: added audio and video nodes --- src/client/documents/Documents.ts | 35 ++++++++++++++++++++ src/client/views/Main.tsx | 11 ++++++- src/client/views/collections/CollectionView.tsx | 2 ++ src/client/views/nodes/AudioBox.scss | 4 +++ src/client/views/nodes/AudioBox.tsx | 44 +++++++++++++++++++++++++ src/client/views/nodes/DocumentView.tsx | 4 ++- src/client/views/nodes/FieldView.tsx | 11 +++++++ src/client/views/nodes/VideoBox.scss | 4 +++ src/client/views/nodes/VideoBox.tsx | 43 ++++++++++++++++++++++++ src/fields/AudioField.ts | 31 +++++++++++++++++ src/fields/VideoField.ts | 30 +++++++++++++++++ src/server/Message.ts | 2 +- src/server/ServerUtil.ts | 6 ++++ 13 files changed, 224 insertions(+), 3 deletions(-) create mode 100644 src/client/views/nodes/AudioBox.scss create mode 100644 src/client/views/nodes/AudioBox.tsx create mode 100644 src/client/views/nodes/VideoBox.scss create mode 100644 src/client/views/nodes/VideoBox.tsx create mode 100644 src/fields/AudioField.ts create mode 100644 src/fields/VideoField.ts (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1d24ff7d2..f81ad3188 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -15,6 +15,10 @@ import { Key } from "../../fields/Key" import { Field } from "../../fields/Field"; import { KeyValueBox } from "../views/nodes/KeyValueBox" import { KVPField } from "../../fields/KVPField"; +import { VideoField } from "../../fields/VideoField" +import { VideoBox } from "../views/nodes/VideoBox"; +import { AudioField } from "../../fields/AudioField"; +import { AudioBox } from "../views/nodes/AudioBox"; export interface DocumentOptions { x?: number; @@ -38,11 +42,15 @@ export namespace Documents { let webProto: Document; let collProto: Document; let kvpProto: Document; + let videoProto: Document; + let audioProto: Document; const textProtoId = "textProto"; const imageProtoId = "imageProto"; const webProtoId = "webProto"; const collProtoId = "collectionProto"; const kvpProtoId = "kvpProto"; + const videoProtoId = "videoProto" + const audioProtoId = "audioProto"; export function initProtos(mainDocId: string, callback: (mainDoc?: Document) => void) { Server.GetFields([collProtoId, textProtoId, imageProtoId, mainDocId], (fields) => { @@ -108,6 +116,17 @@ export namespace Documents { kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValueBox.LayoutString(), { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] }) } + function GetVideoPrototype(): Document { + return videoProto ? videoProto : + videoProto = setupPrototypeOptions(videoProtoId, "VIDEO_PROTO", VideoBox.LayoutString(), + { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] }) + } + function GetAudioPrototype(): Document { + return audioProto ? audioProto : + audioProto = setupPrototypeOptions(audioProtoId, "AUDIO_PROTO", AudioBox.LayoutString(), + { x: 0, y: 0, width: 300, height: 150, layoutKeys: [KeyStore.Data] }) + } + export function ImageDocument(url: string, options: DocumentOptions = {}) { let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, @@ -117,6 +136,22 @@ export namespace Documents { doc.SetText(KeyStore.OverlayLayout, FixedCaption()); return doc; } + export function VideoDocument(url: string, options: DocumentOptions = {}){ + let doc = SetInstanceOptions(GetVideoPrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, + new URL(url), VideoField); + doc.SetText(KeyStore.Caption, "my caption..."); + doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); + doc.SetText(KeyStore.OverlayLayout, FixedCaption()); + return doc; + } + export function AudioDocument(url: string, options: DocumentOptions = {}){ + let doc = SetInstanceOptions(GetAudioPrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, + new URL(url), AudioField); + doc.SetText(KeyStore.Caption, "my caption..."); + doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); + doc.SetText(KeyStore.OverlayLayout, FixedCaption()); + return doc; + } export function TextDocument(options: DocumentOptions = {}) { return SetInstanceOptions(GetTextPrototype(), options, "", TextField); } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index d845fa7a3..a52047631 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -52,13 +52,16 @@ Documents.initProtos(mainDocId, (res?: Document) => { let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; let weburl = "https://cs.brown.edu/courses/cs166/"; + let audiourl = "http://techslides.com/demos/samples/sample.mp3"; + let videourl = "http://techslides.com/demos/sample-videos/small.mp4"; let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" })); let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" })); + let addVideoNode = action(() => Documents.VideoDocument(videourl, {width: 200, height:200, title: "video node"})); let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" })); let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" })); - + let addAudioNode = action(() => Documents.AudioDocument(audiourl,{ width: 200, height: 200, title: "audio node" } )) let addClick = (creator: () => Document) => action(() => mainfreeform.GetList(KeyStore.Data, []).push(creator()) ); @@ -67,6 +70,8 @@ Documents.initProtos(mainDocId, (res?: Document) => { let webRef = React.createRef(); let textRef = React.createRef(); let schemaRef = React.createRef(); + let videoRef = React.createRef(); + let audioRef = React.createRef(); let colRef = React.createRef(); ReactDOM.render(( @@ -94,6 +99,10 @@ Documents.initProtos(mainDocId, (res?: Document) => {
+
+
+
+
), diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 31824763d..454d547ef 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -19,6 +19,8 @@ export enum CollectionViewType { Freeform, Schema, Docking, + Video, + Audio, Tree } diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss new file mode 100644 index 000000000..704cdc31c --- /dev/null +++ b/src/client/views/nodes/AudioBox.scss @@ -0,0 +1,4 @@ +.audiobox-cont{ + height: 100%; + width: 100%; +} \ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx new file mode 100644 index 000000000..f7d89843d --- /dev/null +++ b/src/client/views/nodes/AudioBox.tsx @@ -0,0 +1,44 @@ +import React = require("react") +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 { KeyStore } from '../../../fields/KeyStore'; +import { AudioField } from "../../../fields/AudioField"; +import "./AudioBox.scss" +import { NumberField } from "../../../fields/NumberField"; + +@observer +export class AudioBox extends React.Component { + + public static LayoutString() { return FieldView.LayoutString(AudioBox) } + + constructor(props: FieldViewProps) { + super(props); + } + + + + componentDidMount() { + } + + componentWillUnmount() { + } + + + render() { + let field = this.props.doc.Get(this.props.fieldKey) + let path = field == FieldWaiting ? "http://techslides.com/demos/samples/sample.mp3": + field instanceof AudioField ? field.Data.href : "http://techslides.com/demos/samples/sample.mp3"; + + return ( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e01e1d4cd..b22435f1a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -15,6 +15,8 @@ import { CollectionView, CollectionViewType } from "../collections/CollectionVie import { ContextMenu } from "../ContextMenu"; import { FormattedTextBox } from "../nodes/FormattedTextBox"; import { ImageBox } from "../nodes/ImageBox"; +import { VideoBox } from "../nodes/VideoBox"; +import { AudioBox } from "../nodes/AudioBox"; import { Documents } from "../../documents/Documents" import { KeyValueBox } from "./KeyValueBox" import { WebBox } from "../nodes/WebBox"; @@ -194,7 +196,7 @@ export class DocumentView extends React.Component { } @computed get mainContent() { return { } else if (field instanceof WebField) { return + } + else if (field instanceof VideoField){ + return + } + else if (field instanceof AudioField){ + return } // bcz: this belongs here, but it doesn't render well so taking it out for now // else if (field instanceof HtmlField) { diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss new file mode 100644 index 000000000..7306450d9 --- /dev/null +++ b/src/client/views/nodes/VideoBox.scss @@ -0,0 +1,4 @@ +.videobox-cont{ + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx new file mode 100644 index 000000000..22ff5c5ad --- /dev/null +++ b/src/client/views/nodes/VideoBox.tsx @@ -0,0 +1,43 @@ +import React = require("react") +import { FieldViewProps, FieldView } from './FieldView'; +import { FieldWaiting } from '../../../fields/Field'; +import { observer } from "mobx-react" +import { VideoField } from '../../../fields/VideoField'; +import "./VideoBox.scss" +import { ContextMenu } from "../../views/ContextMenu"; +import { observable, action } from 'mobx'; +import { KeyStore } from '../../../fields/KeyStore'; + +@observer +export class VideoBox extends React.Component { + + public static LayoutString() { return FieldView.LayoutString(VideoBox) } + + constructor(props: FieldViewProps) { + super(props); + } + + + + componentDidMount() { + } + + componentWillUnmount() { + } + + + render() { + let field = this.props.doc.Get(this.props.fieldKey) + let path = field == FieldWaiting ? "http://techslides.com/demos/sample-videos/small.mp4": + field instanceof VideoField ? field.Data.href : "http://techslides.com/demos/sample-videos/small.mp4"; + + return ( +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/fields/AudioField.ts b/src/fields/AudioField.ts new file mode 100644 index 000000000..aefcc15c1 --- /dev/null +++ b/src/fields/AudioField.ts @@ -0,0 +1,31 @@ +import { BasicField } from "./BasicField"; +import { Field, FieldId } from "./Field"; +import { Types } from "../server/Message"; + +export class AudioField extends BasicField { + constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) { + super(data == undefined ? new URL("http://techslides.com/demos/samples/sample.mp3") : data, save, id); + } + + toString(): string { + return this.Data.href; + } + + + ToScriptString(): string { + return `new AudioField("${this.Data}")`; + } + + Copy(): Field { + return new AudioField(this.Data); + } + + ToJson(): { type: Types, data: URL, _id: string } { + return { + type: Types.Audio, + data: this.Data, + _id: this.Id + } + } + +} \ No newline at end of file diff --git a/src/fields/VideoField.ts b/src/fields/VideoField.ts new file mode 100644 index 000000000..5f4ae19bf --- /dev/null +++ b/src/fields/VideoField.ts @@ -0,0 +1,30 @@ +import { BasicField } from "./BasicField"; +import { Field, FieldId } from "./Field"; +import { Types } from "../server/Message"; + +export class VideoField extends BasicField { + constructor(data: URL | undefined = undefined, id?: FieldId, save: boolean = true) { + super(data == undefined ? new URL("http://techslides.com/demos/sample-videos/small.mp4") : data, save, id); + } + + toString(): string { + return this.Data.href; + } + + ToScriptString(): string { + return `new VideoField("${this.Data}")`; + } + + Copy(): Field { + return new VideoField(this.Data); + } + + ToJson(): { type: Types, data: URL, _id: string } { + return { + type: Types.Video, + data: this.Data, + _id: this.Id + } + } + +} \ No newline at end of file diff --git a/src/server/Message.ts b/src/server/Message.ts index 148e6e723..f85f56dd2 100644 --- a/src/server/Message.ts +++ b/src/server/Message.ts @@ -45,7 +45,7 @@ export class GetFieldArgs { } export enum Types { - Number, List, Key, Image, Web, Document, Text, RichText, DocumentReference, Html + Number, List, Key, Image, Web, Document, Text, RichText, DocumentReference, Html, Video, Audio } export class DocumentTransfer implements Transferable { diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts index a53fb5d2b..2e681fece 100644 --- a/src/server/ServerUtil.ts +++ b/src/server/ServerUtil.ts @@ -11,6 +11,8 @@ import { Types } from './Message'; import { Utils } from '../Utils'; import { HtmlField } from '../fields/HtmlField'; import { WebField } from '../fields/WebField'; +import { AudioField } from '../fields/AudioField'; +import { VideoField } from '../fields/VideoField'; export class ServerUtils { public static FromJson(json: any): Field { @@ -41,6 +43,10 @@ export class ServerUtils { return new ImageField(new URL(data), id, false) case Types.List: return ListField.FromJson(id, data) + case Types.Audio: + return new AudioField(new URL(data), id, false) + case Types.Video: + return new VideoField(new URL(data), id, false) case Types.Document: let doc: Document = new Document(id, false) let fields: [string, string][] = data as [string, string][] -- cgit v1.2.3-70-g09d2