Merge branch 'parker' of https://github.com/brown-dash/Dash-Web into parker

1 files changed, 58 insertions, 51 deletions

diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx
index b1d1d8293..44f815336 100644
--- a/src/client/views/pdf/Annotation.tsx
+++ b/src/client/views/pdf/Annotation.tsx
@@ -1,52 +1,46 @@
-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;
     dataDoc: Doc;
     fieldKey: string;
     showInfo: (anno: Opt<Doc>) => void;
-    pointerEvents?: string;
+    pointerEvents?: () => Opt<string>;
 }
 @observer
-export
-    class Annotation extends React.Component<IAnnotationProps> {
+export class Annotation extends React.Component<IAnnotationProps> {
     render() {
-        return DocListCast(this.props.anno.textInlineAnnotations).map(a => <RegionAnnotation pointerEvents={this.props.pointerEvents} {...this.props} document={a} key={a[Id]} />);
+        return (
+            <div>
+                {DocListCast(this.props.anno.textInlineAnnotations).map(a => (
+                    <RegionAnnotation pointerEvents={this.props.pointerEvents} {...this.props} document={a} key={a[Id]} />
+                ))}
+            </div>
+        );
     }
 }
 
 interface IRegionAnnotationProps extends IAnnotationProps {
     document: Doc;
-    pointerEvents?: string;
+    pointerEvents?: () => Opt<string>;
 }
 @observer
 class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
-    private _disposers: { [name: string]: IReactionDisposer } = {};
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
 
-    @observable _brushed: boolean = false;
-    @computed get annoTextRegion() { return Cast(this.props.document.annoTextRegion, Doc, null) || this.props.document; }
-
-    componentDidMount() {
-        this._disposers.brush = reaction(
-            () => this.annoTextRegion && Doc.isBrushedHighlightedDegree(this.annoTextRegion),
-            brushed => brushed !== undefined && runInAction(() => this._brushed = brushed !== 0)
-        );
-    }
-
-    componentWillUnmount() {
-        Object.values(this._disposers).forEach(disposer => disposer?.());
+    @computed get annoTextRegion() {
+        return Cast(this.props.document.annoTextRegion, Doc, null) || this.props.document;
     }
 
     @undoBatch
@@ -55,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);
@@ -77,30 +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() {
-        return (<div className="htmlAnnotation" onPointerEnter={() => this.props.showInfo(this.props.anno)} onPointerLeave={() => this.props.showInfo(undefined)} onPointerDown={this.onPointerDown} ref={this._mainCont}
-            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: this._brushed ? 0.5 : undefined,
-                pointerEvents: this.props.pointerEvents as any,
-                backgroundColor: this._brushed ? "orange" : StrCast(this.props.document.backgroundColor),
-            }} >
-        </div>);
+        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>
+        );
     }
-}
\ No newline at end of file
+}