From 226ca7f09c22e7290a70fc850312ead90acfca12 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Sun, 14 Jul 2019 20:02:42 -0400 Subject: annotation button can now drag onto documents --- src/client/views/pdf/Page.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) (limited to 'src/client/views/pdf/Page.tsx') diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 5ff39c867..1e22aca9e 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react"; import React = require("react"); import { observable, action, runInAction, IReactionDisposer, reaction } from "mobx"; import * as Pdfjs from "pdfjs-dist"; -import { Opt, Doc, FieldResult, Field, DocListCast, WidthSym, HeightSym } from "../../../new_fields/Doc"; +import { Opt, Doc, FieldResult, Field, DocListCast, WidthSym, HeightSym, DocListCastAsync } from "../../../new_fields/Doc"; import "./PDFViewer.scss"; import "pdfjs-dist/web/pdf_viewer.css"; import { PDFBox } from "../nodes/PDFBox"; @@ -10,7 +10,7 @@ import { DragManager } from "../../util/DragManager"; import { Docs, DocUtils } from "../../documents/Documents"; import { List } from "../../../new_fields/List"; import { emptyFunction } from "../../../Utils"; -import { Cast, NumCast, StrCast } from "../../../new_fields/Types"; +import { Cast, NumCast, StrCast, BoolCast } from "../../../new_fields/Types"; import { listSpec } from "../../../new_fields/Schema"; import { menuBar } from "prosemirror-menu"; import { AnnotationTypes, PDFViewer, scale } from "./PDFViewer"; @@ -159,13 +159,23 @@ export default class Page extends React.Component { // document that this annotation is linked to let targetDoc = Docs.Create.TextDocument({ width: 200, height: 200, title: "New Annotation" }); targetDoc.targetPage = this.props.page; - let annotationDoc = this.highlight(targetDoc, "red"); + let annotationDoc = this.highlight(undefined, "red"); + annotationDoc.linkedToDoc = false; // create dragData and star tdrag let dragData = new DragManager.AnnotationDragData(thisDoc, annotationDoc, targetDoc); if (this._textLayer.current) { DragManager.StartAnnotationDrag([ele], dragData, e.pageX, e.pageY, { handlers: { - dragComplete: emptyFunction, + dragComplete: async () => { + if (!(await annotationDoc.linkedToDoc)) { + let annotations = await DocListCastAsync(annotationDoc.annotations); + if (annotations) { + annotations.forEach(anno => { + anno.target = targetDoc; + }); + } + } + } }, hideSource: false }); -- cgit v1.2.3-70-g09d2 From 0f429c53fc3df62a60be1da398740524545357bc Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sun, 14 Jul 2019 22:27:59 -0400 Subject: Compile errors --- src/client/views/pdf/PDFMenu.tsx | 4 +- src/client/views/pdf/Page.tsx | 2 +- src/client/views/search/Pager.scss | 47 --------------------- src/client/views/search/Pager.tsx | 78 ----------------------------------- src/client/views/search/SearchBox.tsx | 5 ++- 5 files changed, 6 insertions(+), 130 deletions(-) delete mode 100644 src/client/views/search/Pager.scss delete mode 100644 src/client/views/search/Pager.tsx (limited to 'src/client/views/pdf/Page.tsx') diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx index e73b759df..27c2a8f1a 100644 --- a/src/client/views/pdf/PDFMenu.tsx +++ b/src/client/views/pdf/PDFMenu.tsx @@ -18,7 +18,7 @@ export default class PDFMenu extends React.Component { @observable private _transitionDelay: string = ""; - StartDrag: (e: PointerEvent, ele: HTMLDivElement) => void = emptyFunction; + StartDrag: (e: PointerEvent, ele: HTMLElement) => void = emptyFunction; Highlight: (d: Doc | undefined, color: string | undefined) => void = emptyFunction; Delete: () => void = emptyFunction; Snippet: (marquee: { left: number, top: number, width: number, height: number }) => void = emptyFunction; @@ -34,7 +34,7 @@ export default class PDFMenu extends React.Component { private _offsetY: number = 0; private _offsetX: number = 0; private _mainCont: React.RefObject = React.createRef(); - private _commentCont: React.RefObject = React.createRef(); + private _commentCont = React.createRef(); private _snippetButton: React.RefObject = React.createRef(); private _dragging: boolean = false; @observable private _keyValue: string = ""; diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 1e22aca9e..b4a4b5806 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -152,7 +152,7 @@ export default class Page extends React.Component { * start a drag event and create or put the necessary info into the drag event. */ @action - startDrag = (e: PointerEvent, ele: HTMLDivElement): void => { + startDrag = (e: PointerEvent, ele: HTMLElement): void => { e.preventDefault(); e.stopPropagation(); let thisDoc = this.props.parent.Document; diff --git a/src/client/views/search/Pager.scss b/src/client/views/search/Pager.scss deleted file mode 100644 index 2b9c81b93..000000000 --- a/src/client/views/search/Pager.scss +++ /dev/null @@ -1,47 +0,0 @@ -@import "../globalCssVariables"; - -.search-pager { - background-color: $dark-color; - border-radius: 10px; - width: 500px; - display: flex; - justify-content: center; - // margin-left: 27px; - float: right; - margin-right: 74px; - margin-left: auto; - - // flex-direction: column; - - .search-arrows { - display: flex; - justify-content: center; - margin: 10px; - width: 50%; - - .arrow { - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - - .fontawesome-icon { - color: $light-color; - width: 20px; - height: 20px; - margin-right: 2px; - margin-left: 2px; - // opacity: .7; - } - } - - .pager-title { - text-align: center; - // font-size: 8px; - // margin-bottom: 10px; - color: $light-color; - // padding: 2px; - width: 40%; - } - } -} \ No newline at end of file diff --git a/src/client/views/search/Pager.tsx b/src/client/views/search/Pager.tsx deleted file mode 100644 index 1c62773b1..000000000 --- a/src/client/views/search/Pager.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from 'react'; -import { observer } from 'mobx-react'; -import { faArrowCircleRight, faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { library } from '@fortawesome/fontawesome-svg-core'; -import "./Pager.scss"; -import { SearchBox } from './SearchBox'; -import { observable, action } from 'mobx'; -import { FilterBox } from './FilterBox'; - -library.add(faArrowCircleRight); -library.add(faArrowCircleLeft); - -@observer -export class Pager extends React.Component { - - @observable _leftHover: boolean = false; - @observable _rightHover: boolean = false; - - @action - onLeftClick(e: React.PointerEvent) { - FilterBox.Instance._pointerTime = e.timeStamp; - if (SearchBox.Instance._pageNum > 0) { - SearchBox.Instance._pageNum -= 1; - } - } - - @action - onRightClick(e: React.PointerEvent) { - FilterBox.Instance._pointerTime = e.timeStamp; - if (SearchBox.Instance._pageNum + 1 < SearchBox.Instance._maxNum) { - SearchBox.Instance._pageNum += 1; - } - } - - @action.bound - mouseInLeft() { - this._leftHover = true; - } - - @action.bound - mouseOutLeft() { - this._leftHover = false; - } - - @action.bound - mouseInRight() { - this._rightHover = true; - } - - @action.bound - mouseOutRight() { - this._rightHover = false; - } - - render() { - return ( -
-
-
- -
-
- page {SearchBox.Instance._pageNum + 1} of {SearchBox.Instance._maxNum} -
-
- -
-
-
- ); - } - -} \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index c02db528a..e0c5d163e 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -213,7 +213,8 @@ export class SearchBox extends React.Component { this._curRequest = undefined; } - resultsScrolled = flow(function* (this: SearchBox, e?: React.UIEvent) { + @action + resultsScrolled = (e?: React.UIEvent) => { let scrollY = e ? e.currentTarget.scrollTop : 0; let buffer = 4; let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer)); @@ -273,7 +274,7 @@ export class SearchBox extends React.Component { this._visibleElements.length = this._results.length; this._isSearch.length = this._results.length; } - }); + } @computed get resFull() { -- cgit v1.2.3-70-g09d2 From 7ed7616b75f0a778d2443c38890e809cc4fece40 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Sun, 14 Jul 2019 22:32:25 -0400 Subject: pdf marquee all directionss --- src/client/views/pdf/Page.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'src/client/views/pdf/Page.tsx') diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx index 1e22aca9e..8b2c86684 100644 --- a/src/client/views/pdf/Page.tsx +++ b/src/client/views/pdf/Page.tsx @@ -55,6 +55,8 @@ export default class Page extends React.Component { // private _curly: React.RefObject; private _marqueeing: boolean = false; private _reactionDisposer?: IReactionDisposer; + private _startY: number = 0; + private _startX: number = 0; constructor(props: IPageProps) { super(props); @@ -230,8 +232,8 @@ export default class Page extends React.Component { let current = this._textLayer.current; if (current) { let boundingRect = current.getBoundingClientRect(); - this._marqueeX = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width); - this._marqueeY = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height); + this._startX = this._marqueeX = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width); + this._startY = this._marqueeY = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height); } this._marqueeing = true; if (this._marquee.current) this._marquee.current.style.opacity = "0.2"; @@ -254,8 +256,12 @@ export default class Page extends React.Component { if (current) { // transform positions and find the width and height to set the marquee to let boundingRect = current.getBoundingClientRect(); - this._marqueeWidth = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width) - this._marqueeX; - this._marqueeHeight = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height) - this._marqueeY; + this._marqueeWidth = ((e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width)) - this._startX; + this._marqueeHeight = ((e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height)) - this._startY; + this._marqueeX = Math.min(this._startX, this._startX + this._marqueeWidth); + this._marqueeY = Math.min(this._startY, this._startY + this._marqueeHeight); + this._marqueeWidth = Math.abs(this._marqueeWidth); + this._marqueeHeight = Math.abs(this._marqueeHeight); let { background, opacity, transform: transform } = this.getCurlyTransform(); if (this._marquee.current /*&& this._curly.current*/) { this._marquee.current.style.background = background; -- cgit v1.2.3-70-g09d2