diff options
| author | bobzel <zzzman@gmail.com> | 2022-07-08 00:17:26 -0400 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2022-07-08 00:17:26 -0400 |
| commit | 146f8622d5bac2edc6b09f57c173bd057dfbcfad (patch) | |
| tree | f871089c438a476543ca96bac163c0532b9557c7 /src/client/views/pdf/Annotation.tsx | |
| parent | b7e66da6b23cdb41c127000dfe13843d35f7d0cc (diff) | |
restructured currentUserUtils to avoid having import cycles.
Diffstat (limited to 'src/client/views/pdf/Annotation.tsx')
| -rw-r--r-- | src/client/views/pdf/Annotation.tsx | 108 |
1 files changed, 56 insertions, 52 deletions
diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx index 5bdce273d..44f815336 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, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; -import { observer } from "mobx-react"; -import { Doc, DocListCast, Opt } from "../../../fields/Doc"; -import { Id } from "../../../fields/FieldSymbols"; -import { List } from "../../../fields/List"; -import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; -import { LinkManager } from "../../util/LinkManager"; -import { undoBatch } from "../../util/UndoManager"; -import { FieldViewProps } from "../nodes/FieldView"; -import { AnchorMenu } from "./AnchorMenu"; -import "./Annotation.scss"; +import React = require('react'); +import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { observer } from 'mobx-react'; +import { Doc, DocListCast, Opt } from '../../../fields/Doc'; +import { Id } from '../../../fields/FieldSymbols'; +import { List } from '../../../fields/List'; +import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types'; +import { LinkFollower } from '../../util/LinkFollower'; +import { undoBatch } from '../../util/UndoManager'; +import { FieldViewProps } from '../nodes/FieldView'; +import { AnchorMenu } from './AnchorMenu'; +import './Annotation.scss'; interface IAnnotationProps extends FieldViewProps { anno: Doc; @@ -19,14 +19,15 @@ interface IAnnotationProps extends FieldViewProps { pointerEvents?: () => Opt<string>; } @observer -export - class Annotation extends React.Component<IAnnotationProps> { +export class Annotation extends React.Component<IAnnotationProps> { render() { - return <div> - {DocListCast(this.props.anno.textInlineAnnotations).map(a => - <RegionAnnotation pointerEvents={this.props.pointerEvents} {...this.props} document={a} key={a[Id]} /> - )} - </div>; + return ( + <div> + {DocListCast(this.props.anno.textInlineAnnotations).map(a => ( + <RegionAnnotation pointerEvents={this.props.pointerEvents} {...this.props} document={a} key={a[Id]} /> + ))} + </div> + ); } } @@ -38,7 +39,9 @@ interface IRegionAnnotationProps extends IAnnotationProps { class RegionAnnotation extends React.Component<IRegionAnnotationProps> { private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); - @computed get annoTextRegion() { return Cast(this.props.document.annoTextRegion, Doc, null) || this.props.document; } + @computed get annoTextRegion() { + return Cast(this.props.document.annoTextRegion, Doc, null) || this.props.document; + } @undoBatch deleteAnnotation = () => { @@ -46,20 +49,20 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> { this.props.dataDoc[this.props.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion)); AnchorMenu.Instance.fadeOut(true); this.props.select(false); - } + }; @undoBatch - pinToPres = () => this.props.pinToPres(this.annoTextRegion) + pinToPres = () => this.props.pinToPres(this.annoTextRegion); @undoBatch - makePushpin = () => this.annoTextRegion.isPushpin = !this.annoTextRegion.isPushpin + makePushpin = () => (this.annoTextRegion.isPushpin = !this.annoTextRegion.isPushpin); isPushpin = () => BoolCast(this.annoTextRegion.isPushpin); @action onPointerDown = (e: React.PointerEvent) => { if (e.button === 2 || e.ctrlKey) { - AnchorMenu.Instance.Status = "annotation"; + AnchorMenu.Instance.Status = 'annotation'; AnchorMenu.Instance.Delete = this.deleteAnnotation.bind(this); AnchorMenu.Instance.Pinned = false; AnchorMenu.Instance.AddTag = this.addTag.bind(this); @@ -68,42 +71,43 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> { AnchorMenu.Instance.IsPushpin = this.isPushpin; AnchorMenu.Instance.jumpTo(e.clientX, e.clientY, true); e.stopPropagation(); - } - else if (e.button === 0) { + } else if (e.button === 0) { e.stopPropagation(); - LinkManager.FollowLink(undefined, this.annoTextRegion, this.props, false); + LinkFollower.FollowLink(undefined, this.annoTextRegion, this.props, false); } - } + }; addTag = (key: string, value: string): boolean => { const valNum = parseInt(value); this.annoTextRegion[key] = isNaN(valNum) ? value : valNum; return true; - } + }; render() { const brushed = this.annoTextRegion && Doc.isBrushedHighlightedDegree(this.annoTextRegion); - return (<div className="htmlAnnotation" ref={this._mainCont} - onPointerEnter={action(() => { - Doc.BrushDoc(this.props.anno); - this.props.showInfo(this.props.anno); - })} - onPointerLeave={action(() => { - Doc.UnBrushDoc(this.props.anno); - this.props.showInfo(undefined); - })} - onPointerDown={this.onPointerDown} - style={{ - left: NumCast(this.props.document.x), - top: NumCast(this.props.document.y), - width: NumCast(this.props.document._width), - height: NumCast(this.props.document._height), - opacity: brushed === Doc.DocBrushStatus.highlighted ? 0.5 : undefined, - pointerEvents: this.props.pointerEvents?.() as any, - outline: brushed === Doc.DocBrushStatus.linkHighlighted ? "solid 1px lightBlue" : undefined, - backgroundColor: brushed === Doc.DocBrushStatus.highlighted ? "orange" : - StrCast(this.props.document.backgroundColor), - }} > - </div>); + return ( + <div + className="htmlAnnotation" + ref={this._mainCont} + onPointerEnter={action(() => { + Doc.BrushDoc(this.props.anno); + this.props.showInfo(this.props.anno); + })} + onPointerLeave={action(() => { + Doc.UnBrushDoc(this.props.anno); + this.props.showInfo(undefined); + })} + onPointerDown={this.onPointerDown} + style={{ + left: NumCast(this.props.document.x), + top: NumCast(this.props.document.y), + width: NumCast(this.props.document._width), + height: NumCast(this.props.document._height), + opacity: brushed === Doc.DocBrushStatus.highlighted ? 0.5 : undefined, + pointerEvents: this.props.pointerEvents?.() as any, + outline: brushed === Doc.DocBrushStatus.linkHighlighted ? 'solid 1px lightBlue' : undefined, + backgroundColor: brushed === Doc.DocBrushStatus.highlighted ? 'orange' : StrCast(this.props.document.backgroundColor), + }}></div> + ); } -}
\ No newline at end of file +} |
