From 524806c57b5582c6ed8893d38d79c55603ced834 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 9 Mar 2021 15:49:24 -0500 Subject: some cleanup for inlineTextAnnotations to use a better named field. removing some unused code. --- src/client/views/MarqueeAnnotator.tsx | 64 +++++++++++++++--------------- src/client/views/pdf/Annotation.tsx | 73 +++++++++++------------------------ src/client/views/pdf/PDFViewer.tsx | 13 +++---- 3 files changed, 60 insertions(+), 90 deletions(-) (limited to 'src') diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index f03e1dd9d..63439586c 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -99,43 +99,41 @@ export class MarqueeAnnotator extends React.Component { const scale = this.props.scaling?.() || 1; const anno = this.props.savedAnnotations.values()[0][0]; const containerOffset = this.props.containerOffset?.() || [0, 0]; - const mainAnnoDoc = Docs.Create.FreeformDocument([], { backgroundColor: color, annotationOn: this.props.rootDoc, title: "Annotation on " + this.props.rootDoc.title }); - if (anno.style.left) mainAnnoDoc.x = (parseInt(anno.style.left) - containerOffset[0]) / scale; - if (anno.style.top) mainAnnoDoc.y = (parseInt(anno.style.top) - containerOffset[1]) / scale + NumCast(this.props.scrollTop); - if (anno.style.height) mainAnnoDoc._height = parseInt(anno.style.height) / scale; - if (anno.style.width) mainAnnoDoc._width = parseInt(anno.style.width) / scale; - mainAnnoDoc.group = mainAnnoDoc; + const marqueeAnno = Docs.Create.FreeformDocument([], { backgroundColor: color, annotationOn: this.props.rootDoc, title: "Annotation on " + this.props.rootDoc.title }); + marqueeAnno.x = (parseInt(anno.style.left || "0") - containerOffset[0]) / scale; + marqueeAnno.y = (parseInt(anno.style.top || "0") - containerOffset[1]) / scale + NumCast(this.props.scrollTop); + marqueeAnno._height = parseInt(anno.style.height || "0") / scale; + marqueeAnno._width = parseInt(anno.style.width || "0") / scale; anno.remove(); this.props.savedAnnotations.clear(); - return mainAnnoDoc; - } else { - const mainAnnoDoc = Docs.Create.FreeformDocument([], { type: DocumentType.PDFANNO, annotationOn: this.props.rootDoc, title: "Selection on " + this.props.rootDoc.title, _width: 1, _height: 1 }); - const mainAnnoDocProto = Doc.GetProto(mainAnnoDoc); + return marqueeAnno; + } - let maxX = -Number.MAX_VALUE; - let minY = Number.MAX_VALUE; - const annoDocs: Doc[] = []; - this.props.savedAnnotations.forEach((key: number, value: HTMLDivElement[]) => value.map(anno => { - const annoDoc = new Doc(); - if (anno.style.left) annoDoc.x = parseInt(anno.style.left); - if (anno.style.top) annoDoc.y = parseInt(anno.style.top); - if (anno.style.height) annoDoc._height = parseInt(anno.style.height); - if (anno.style.width) annoDoc._width = parseInt(anno.style.width); - annoDoc.group = mainAnnoDoc; - annoDoc.backgroundColor = color; - annoDocs.push(annoDoc); - anno.remove(); - (annoDoc.y !== undefined) && (minY = Math.min(NumCast(annoDoc.y), minY)); - (annoDoc.x !== undefined) && (maxX = Math.max(NumCast(annoDoc.x) + NumCast(annoDoc._width), maxX)); - })); + const textRegionAnno = Docs.Create.FreeformDocument([], { type: DocumentType.PDFANNO, annotationOn: this.props.rootDoc, title: "Selection on " + this.props.rootDoc.title, _width: 1, _height: 1 }); + let maxX = -Number.MAX_VALUE; + let minY = Number.MAX_VALUE; + const annoDocs: Doc[] = []; + this.props.savedAnnotations.forEach((key: number, value: HTMLDivElement[]) => value.map(anno => { + const textRegion = new Doc(); + textRegion.x = parseInt(anno.style.left ?? "0"); + textRegion.y = parseInt(anno.style.top ?? "0"); + textRegion._height = parseInt(anno.style.height ?? "0"); + textRegion._width = parseInt(anno.style.width ?? "0"); + textRegion.annoTextRegion = textRegionAnno; + textRegion.backgroundColor = color; + annoDocs.push(textRegion); + anno.remove(); + minY = Math.min(NumCast(textRegion.y), minY); + maxX = Math.max(NumCast(textRegion.x) + NumCast(textRegion._width), maxX); + })); - mainAnnoDocProto.y = Math.max(minY, 0); - mainAnnoDocProto.x = Math.max(maxX, 0); - // mainAnnoDocProto.text = this._selectionText; - mainAnnoDocProto.annotations = new List(annoDocs); - this.props.savedAnnotations.clear(); - return mainAnnoDoc; - } + const textRegionAnnoProto = Doc.GetProto(textRegionAnno); + textRegionAnnoProto.y = Math.max(minY, 0); + textRegionAnnoProto.x = Math.max(maxX, 0); + // mainAnnoDocProto.text = this._selectionText; + textRegionAnnoProto.textInlineAnnotations = new List(annoDocs); + this.props.savedAnnotations.clear(); + return textRegionAnno; } @action highlight = (color: string, isLinkButton: boolean) => { diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx index 4e3721e2b..913cfdcc2 100644 --- a/src/client/views/pdf/Annotation.tsx +++ b/src/client/views/pdf/Annotation.tsx @@ -1,15 +1,15 @@ import React = require("react"); -import { action, IReactionDisposer, observable, reaction, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { List } from "../../../fields/List"; -import { BoolCast, Cast, FieldValue, NumCast, PromiseValue, StrCast } from "../../../fields/Types"; +import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; import { LinkManager } from "../../util/LinkManager"; import { undoBatch } from "../../util/UndoManager"; -import "./Annotation.scss"; +import { FieldViewProps } from "../nodes/FieldView"; import { AnchorMenu } from "./AnchorMenu"; -import { FieldViewProps, FieldView } from "../nodes/FieldView"; +import "./Annotation.scss"; interface IAnnotationProps extends FieldViewProps { anno: Doc; @@ -21,7 +21,7 @@ interface IAnnotationProps extends FieldViewProps { export class Annotation extends React.Component { render() { - return DocListCast(this.props.anno.annotations).map(a => + return DocListCast(this.props.anno.textInlineAnnotations).map(a => ); } } @@ -35,59 +35,38 @@ interface IRegionAnnotationProps extends IAnnotationProps { } @observer class RegionAnnotation extends React.Component { - private _reactionDisposer?: IReactionDisposer; - private _brushDisposer?: IReactionDisposer; + private _disposers: { [name: string]: IReactionDisposer } = {}; private _mainCont: React.RefObject = React.createRef(); - @observable private _brushed: boolean = false; + @observable _brushed: boolean = false; + @computed get annoTextRegion() { return Cast(this.props.document.annoTextRegion, Doc, null) || this.props.document; } componentDidMount() { - this._reactionDisposer = reaction( - () => this.props.document.delete, - (del) => del && this._mainCont.current && (this._mainCont.current.style.display = "none"), - { fireImmediately: true } - ); - - this._brushDisposer = reaction( - () => FieldValue(Cast(this.props.document.group, Doc)) && Doc.isBrushedHighlightedDegree(FieldValue(Cast(this.props.document.group, Doc))!), + this._disposers.brush = reaction( + () => this.annoTextRegion && Doc.isBrushedHighlightedDegree(this.annoTextRegion), brushed => brushed !== undefined && runInAction(() => this._brushed = brushed !== 0) ); } componentWillUnmount() { - this._brushDisposer?.(); - this._reactionDisposer?.(); + Object.values(this._disposers).forEach(disposer => disposer?.()); } @undoBatch deleteAnnotation = () => { - const annotation = DocListCast(this.props.dataDoc[this.props.fieldKey + "-annotations"]); - const group = FieldValue(Cast(this.props.document.group, Doc)); - if (group) { - if (annotation.indexOf(group) !== -1) { - const newAnnotations = annotation.filter(a => a !== FieldValue(Cast(this.props.document.group, Doc))); - this.props.dataDoc[this.props.fieldKey + "-annotations"] = new List(newAnnotations); - } - - DocListCast(group.annotations).forEach(anno => anno.delete = true); - } + const docAnnotations = DocListCast(this.props.dataDoc[this.props.fieldKey]); + this.props.dataDoc[this.props.fieldKey] = new List(docAnnotations.filter(a => a !== this.annoTextRegion)); AnchorMenu.Instance.fadeOut(true); this.props.select(false); } @undoBatch - pinToPres = () => { - const group = FieldValue(Cast(this.props.document.group, Doc)); - group && this.props.pinToPres(group); - } + pinToPres = () => this.props.pinToPres(this.annoTextRegion); @undoBatch - makePushpin = action(() => { - const group = Cast(this.props.document.group, Doc, null); - group.isPushpin = !group.isPushpin; - }); + makePushpin = () => this.annoTextRegion.isPushpin = !this.annoTextRegion.isPushpin; - isPushpin = () => BoolCast(Cast(this.props.document.group, Doc, null)?.isPushpin); + isPushpin = () => BoolCast(this.annoTextRegion.isPushpin); @action onPointerDown = (e: React.PointerEvent) => { @@ -102,32 +81,26 @@ class RegionAnnotation extends React.Component { AnchorMenu.Instance.jumpTo(e.clientX, e.clientY, true); e.stopPropagation(); } - else if (e.button === 0 && this.props.document.group instanceof Doc) { + else if (e.button === 0) { e.stopPropagation(); - LinkManager.FollowLink(undefined, this.props.document.group, this.props, false); + LinkManager.FollowLink(undefined, this.annoTextRegion, this.props, false); } } - addTag = (key: string, value: string): boolean => { - const group = FieldValue(Cast(this.props.document.group, Doc)); - if (group) { - const valNum = parseInt(value); - group[key] = isNaN(valNum) ? value : valNum; - return true; - } - return false; + const valNum = parseInt(value); + this.annoTextRegion[key] = isNaN(valNum) ? value : valNum; + return true; } - @observable _showInfo = false; render() { - return (
this.props.showInfo(this.props.anno))} onPointerLeave={action(() => this.props.showInfo(undefined))} onPointerDown={this.onPointerDown} ref={this._mainCont} + return (
this.props.showInfo(this.props.anno)} onPointerLeave={() => this.props.showInfo(undefined)} onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ top: this.props.y, left: this.props.x, width: this.props.width, height: this.props.height, - opacity: !this._showInfo && this._brushed ? 0.5 : undefined, + opacity: this._brushed ? 0.5 : undefined, backgroundColor: this._brushed ? "orange" : StrCast(this.props.document.backgroundColor), }} >
); diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 720d2d92e..28d7b0954 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -23,12 +23,12 @@ import { CollectionFreeFormView } from "../collections/collectionFreeForm/Collec import { ViewBoxAnnotatableComponent } from "../DocComponent"; import { MarqueeAnnotator } from "../MarqueeAnnotator"; import { FieldViewProps } from "../nodes/FieldView"; -import { Annotation } from "./Annotation"; +import { LinkDocPreview } from "../nodes/LinkDocPreview"; import { AnchorMenu } from "./AnchorMenu"; +import { Annotation } from "./Annotation"; import "./PDFViewer.scss"; const pdfjs = require('pdfjs-dist/es5/build/pdf.js'); import React = require("react"); -import { LinkDocPreview } from "../nodes/LinkDocPreview"; const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer"); const pdfjsLib = require("pdfjs-dist"); const _global = (window /* browser */ || global /* node */) as any; @@ -94,7 +94,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent a.annotations); } + @computed get inlineTextAnnotations() { return this.allAnnotations.filter(a => a.textInlineAnnotations); } componentDidMount = async () => { // change the address to be the file address of the PNG version of each page @@ -306,7 +306,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { this.Index = Math.min(this.Index + 1, this.allAnnotations.length - 1); this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]); - } @action @@ -512,8 +511,8 @@ export class PDFViewer extends ViewBoxAnnotatableComponent - {this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => - ) + {this.inlineTextAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => + ) }
; } @@ -573,7 +572,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._zoomed; render() { TraceMobx(); - return