From ad0152df3d50d18d760570930db4da5aae849d2f Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 5 Jul 2019 17:33:58 -0400 Subject: small fixes --- src/client/views/pdf/PDFViewer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/client/views/pdf') diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 8af29110f..581237287 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -229,12 +229,13 @@ export class Viewer extends React.Component { } } + @action makeAnnotationDocument = (sourceDoc: Doc | undefined, s: number, color: string): Doc => { let annoDocs: Doc[] = []; let mainAnnoDoc = Docs.CreateInstance(new Doc(), "", {}); mainAnnoDoc.title = "Annotation on " + StrCast(this.props.parent.Document.title); - mainAnnoDoc.pdfDoc = this.props.parent.Document; + mainAnnoDoc.pdfDoc = this.props.parent.props.Document; let minY = Number.MAX_VALUE; this._savedAnnotations.forEach((key: number, value: HTMLDivElement[]) => { for (let anno of value) { -- cgit v1.2.3-70-g09d2 From 6cc2335bc6d318ec780bdaecfbad4e047a7b5ac9 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Mon, 8 Jul 2019 18:49:40 -0400 Subject: end of day 7/8 --- src/client/views/pdf/PDFMenu.tsx | 12 ++-- src/client/views/search/FilterBox.tsx | 2 +- src/client/views/search/SearchBox.tsx | 115 +++++++++++++++++++++++----------- 3 files changed, 86 insertions(+), 43 deletions(-) (limited to 'src/client/views/pdf') diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx index f93b2e59f..b979a9932 100644 --- a/src/client/views/pdf/PDFMenu.tsx +++ b/src/client/views/pdf/PDFMenu.tsx @@ -242,24 +242,24 @@ export default class PDFMenu extends React.Component { render() { let buttons = this.Status === "pdf" || this.Status === "snippet" ? [ - , - , + , this.Status === "snippet" ? : undefined, - ] : [ - , - , + , + ,
, - , + , ]; return ( diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx index 23a1b31d8..4c74c0413 100644 --- a/src/client/views/search/FilterBox.tsx +++ b/src/client/views/search/FilterBox.tsx @@ -242,7 +242,7 @@ export class FilterBox extends React.Component { let finalDocs: Doc[] = []; docs.forEach(doc => { let layoutresult = Cast(doc.type, "string"); - if (!layoutresult || this._icons.includes(layoutresult)) { + if (layoutresult && this._icons.includes(layoutresult)) { finalDocs.push(doc); } }); diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 327f9514a..430ca3b2e 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -15,6 +15,7 @@ import { Id } from '../../../new_fields/FieldSymbols'; import { SearchUtil } from '../../util/SearchUtil'; import { RouteStore } from '../../../server/RouteStore'; import { FilterBox } from './FilterBox'; +import { start } from 'repl'; @observer export class SearchBox extends React.Component { @@ -31,7 +32,10 @@ export class SearchBox extends React.Component { private _isSearch: ("search" | "placeholder" | undefined)[] = []; private _currentIndex = 0; - private _numResults = 0; + private _numTotalResults = 0; + private _numFilteredResults = 0; + private _startIndex = -1; + private _endIndex = -1; static Instance: SearchBox; @@ -55,15 +59,16 @@ export class SearchBox extends React.Component { onChange(e: React.ChangeEvent) { this._searchString = e.target.value; - if (this._searchString === "") { - this._results = []; - this._openNoResults = false; - } + this._openNoResults = false; + this._results = []; + this._visibleElements = []; + this._currentIndex = 0; + this._numTotalResults = 0; + this._startIndex = -1; + this._endIndex = -1; } - enter = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { this.submitSearch(); } - } + enter = (e: React.KeyboardEvent) => { if (e.key === "Enter") { this.submitSearch(); } } public static async convertDataUri(imageUri: string, returnedFilename: string) { try { @@ -111,13 +116,30 @@ export class SearchBox extends React.Component { @action getResults = async (query: string, count: number) => { let resDocs = []; + // count is total number of documents to be shown (i believe) + console.log(`Count: ${count}`); while (resDocs.length < count) { - const { docs, numFound } = await SearchUtil.Search(query, true, count === -1 ? undefined : this._currentIndex, count === -1 ? undefined : this._maxNum); - if (numFound !== this._numResults) { - this._numResults = numFound; + let index = count === -1 ? undefined : this._currentIndex; + let num = count === -1 ? undefined : Math.min(this._numTotalResults - this._currentIndex + 1, this._maxNum); + // num found has to be the number of docs before filtering happens - this is the total num + const { docs, numFound } = await SearchUtil.Search(query, true, index, num); + // accounts for the fact that there may be fewer documents than the max that are returned + let filteredDocs = FilterBox.Instance.filterDocsByType(docs); + count = Math.min(numFound, count); + // uh what is going on here with the first part? + if (numFound !== this._numTotalResults && this._numTotalResults === 0) { + console.log(`Total: ${numFound}`); + this._numTotalResults = numFound; } - resDocs.push(...FilterBox.Instance.filterDocsByType(docs)); - this._currentIndex += this._maxNum; + + // if (filteredDocs.length < docs.length) { + // this._numResults -= docs.length - filteredDocs.length; + // console.log(`New Total: ${this._numResults}`); + // } + resDocs.push(...filteredDocs); + this._currentIndex += docs.length; + console.log(`ResDocs: ${resDocs.length}`); + console.log(`CurrIndex: ${this._currentIndex}`); } return resDocs; } @@ -171,7 +193,7 @@ export class SearchBox extends React.Component { @action.bound closeSearch = () => { - console.log("closing search"); + console.log("closing search") FilterBox.Instance.closeFilter(); this.closeResults(); } @@ -180,46 +202,67 @@ export class SearchBox extends React.Component { closeResults() { this._resultsOpen = false; this._results = []; + this._visibleElements = []; + this._currentIndex = 0; + this._numTotalResults = 0; + this._startIndex = -1; + this._endIndex = -1; } + @action resultsScrolled = async (e?: React.UIEvent) => { let scrollY = e ? e.currentTarget.scrollTop : 0; let buffer = 4; let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer)); - let endIndex = Math.ceil(Math.min(this._numResults - 1, startIndex + (560 / 70) + buffer)); + let endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (560 / 70) + buffer)); - runInAction(() => { - if (this._numResults === 0 && this._openNoResults) { - this._visibleElements = [
No Search Results
]; - return; - } - else if (this._visibleElements.length !== this._numResults) { - this._visibleElements = Array(this._numResults); - this._isSearch = Array(this._numResults); - } - }); + if (startIndex === this._startIndex && endIndex === this._endIndex) { + return; + } + + console.log(`START: ${startIndex}`); + console.log(`END: ${endIndex}`); + + this._startIndex = startIndex; + this._endIndex = endIndex; + + if (this._numTotalResults === 0 && this._openNoResults) { + this._visibleElements = [
No Search Results
]; + return; + } - for (let i = 0; i < this._numResults; i++) { + else if (this._visibleElements.length !== this._numTotalResults) { + this._visibleElements = Array(this._numTotalResults); + this._isSearch = Array(this._numTotalResults); + } + + for (let i = 0; i < this._numTotalResults; i++) { if (i < startIndex || i > endIndex) { if (this._isSearch[i] !== "placeholder") { this._isSearch[i] = "placeholder"; - runInAction(() => { - this._visibleElements[i] =
; - }); + this._visibleElements[i] =
; } } else { if (this._isSearch[i] !== "search") { let result: Doc | undefined = undefined; if (i >= this._results.length) { - this._results.push(...(await this.getResults(this._searchString, 1))); - } - result = this._results[i]; - if (result) { + let results = await this.getResults(this._searchString, i - this._results.length) runInAction(() => { - this._visibleElements[i] = ; - }); - this._isSearch[i] = "search"; + this._results.push(...results); + result = this._results[i]; + if (result) { + this._visibleElements[i] = ; + this._isSearch[i] = "search"; + } + }) + } + else { + result = this._results[i]; + if (result) { + this._visibleElements[i] = ; + this._isSearch[i] = "search"; + } } } } -- cgit v1.2.3-70-g09d2 From d2d19d6e87111eb011b61ba352d0b39eb8ba2250 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Sun, 14 Jul 2019 19:30:25 -0400 Subject: fixed pdf annotation layer being off position and fixed linking to a region on a pdf --- src/client/views/collections/CollectionPDFView.tsx | 14 +++++++------- src/client/views/pdf/PDFViewer.tsx | 1 + 2 files changed, 8 insertions(+), 7 deletions(-) (limited to 'src/client/views/pdf') diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index c97443785..8ab360984 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -30,13 +30,13 @@ export class CollectionPDFView extends React.Component { () => NumCast(this.props.Document.scrollY), () => { // let transform = this.props.ScreenToLocalTransform(); - if (this._buttonTray.current) { - // console.log(this._buttonTray.current.offsetHeight); - // console.log(NumCast(this.props.Document.scrollY)); - let scale = this.nativeWidth() / this.props.Document[WidthSym](); - this.props.Document.panY = NumCast(this.props.Document.scrollY); - // console.log(scale); - } + // if (this._buttonTray.current) { + // console.log(this._buttonTray.current.offsetHeight); + // console.log(NumCast(this.props.Document.scrollY)); + let scale = this.nativeWidth() / this.props.Document[WidthSym](); + this.props.Document.panY = NumCast(this.props.Document.scrollY); + // console.log(scale); + // } // console.log(this.props.Document[HeightSym]()); }, { fireImmediately: true } diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 8f5a356c8..e3a716b4b 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -236,6 +236,7 @@ export class Viewer extends React.Component { } } + @action makeAnnotationDocument = (sourceDoc: Doc | undefined, s: number, color: string): Doc => { let annoDocs: Doc[] = []; let mainAnnoDoc = Docs.Create.InstanceFromProto(new Doc(), "", {}); -- cgit v1.2.3-70-g09d2 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/nodes/DocumentView.tsx | 12 ++++++++++++ src/client/views/pdf/Page.tsx | 18 ++++++++++++++---- 2 files changed, 26 insertions(+), 4 deletions(-) (limited to 'src/client/views/pdf') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index fcb38487d..2c1813482 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -421,6 +421,18 @@ export class DocumentView extends DocComponent(Docu @undoBatch @action drop = async (e: Event, de: DragManager.DropEvent) => { + if (de.data instanceof DragManager.AnnotationDragData) { + e.stopPropagation(); + let annotationDoc = de.data.annotationDocument; + annotationDoc.linkedToDoc = true; + let targetDoc = this.props.Document; + let annotations = await DocListCastAsync(annotationDoc.annotations); + if (annotations) { + annotations.forEach(anno => { + anno.target = targetDoc; + }); + } + } if (de.data instanceof DragManager.LinkDragData) { let sourceDoc = de.data.linkSourceDocument; let destDoc = this.props.Document; 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 c4f324757c4ce3c9da077f5b10370f3b53cb3411 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Sun, 14 Jul 2019 20:46:15 -0400 Subject: added better ui for pdf menu dragger and search box now clears when nothing is searched --- src/client/views/pdf/PDFMenu.scss | 4 ++++ src/client/views/pdf/PDFViewer.tsx | 4 ---- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/client/views/pdf') diff --git a/src/client/views/pdf/PDFMenu.scss b/src/client/views/pdf/PDFMenu.scss index a4624b1f6..b06d19c53 100644 --- a/src/client/views/pdf/PDFMenu.scss +++ b/src/client/views/pdf/PDFMenu.scss @@ -21,6 +21,10 @@ .pdfMenu-dragger { height: 100%; transition: width .2s; + background-image: url("https://logodix.com/logo/1020374.png"); + background-size: 90% 100%; + background-repeat: no-repeat; + background-position: left center; } .pdfMenu-addTag { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index e3a716b4b..943454c33 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -450,10 +450,6 @@ export class Viewer extends React.Component { @action search = (searchString: string) => { - if (searchString.length === 0) { - return; - } - if (this._pdfViewer._pageViewsReady) { this._pdfFindController.executeCommand('find', { -- 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') 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') 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