1 files changed, 19 insertions, 18 deletions

diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index 90323086c..3f4200dce 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -15,18 +15,19 @@ import './MarqueeAnnotator.scss';
 import { DocumentView } from './nodes/DocumentView';
 import { ObservableReactComponent } from './ObservableReactComponent';
 import { AnchorMenu } from './pdf/AnchorMenu';
+import { Transform } from '../util/Transform';
 
 export interface MarqueeAnnotatorProps {
     Document: Doc;
     down?: number[];
     scrollTop: number;
-    isNativeScaled?: boolean;
     scaling?: () => number;
     annotationLayerScaling?: () => number;
     annotationLayerScrollTop: number;
     containerOffset?: () => number[];
     marqueeContainer: HTMLDivElement;
     docView: () => DocumentView;
+    screenTransform: () => Transform;
     savedAnnotations: () => ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>;
     selectionText: () => string;
     annotationLayer: HTMLDivElement;
@@ -34,6 +35,7 @@ export interface MarqueeAnnotatorProps {
     getPageFromScroll?: (top: number) => number;
     finishMarquee: (x?: number, y?: number) => void;
     anchorMenuClick?: () => undefined | ((anchor: Doc) => void);
+    anchorMenuFlashcard?: () => Promise<string>;
     anchorMenuCrop?: (anchor: Doc | undefined, addCrop: boolean) => Doc | undefined;
     highlightDragSrcColor?: string;
 }
@@ -46,10 +48,10 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
         makeObservable(this);
     }
 
-    @observable private _width: number = 0;
-    @observable private _height: number = 0;
-    @computed get top() { return Math.min(this._start.y, this._start.y + this._height); } // prettier-ignore
-    @computed get left() { return Math.min(this._start.x, this._start.x + this._width);} // prettier-ignore
+    @observable Width: number = 0;
+    @observable Height: number = 0;
+    @computed get top() { return Math.min(this._start.y, this._start.y + this.Height); } // prettier-ignore
+    @computed get left() { return Math.min(this._start.x, this._start.x + this.Width);} // prettier-ignore
 
     static clearAnnotations = action((savedAnnotations: ObservableMap<number, HTMLDivElement[]>) => {
         AnchorMenu.Instance.Status = 'marquee';
@@ -156,7 +158,7 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
     //    4) reattach the vector to the center of the bounding box
     getTransformedScreenPt = (down: number[]) => {
         const { marqueeContainer } = this.props;
-        const containerXf = this.props.isNativeScaled ? this.props.docView().screenToContentsTransform() : this.props.docView().screenToViewTransform();
+        const containerXf = this.props.screenTransform();
         const boundingRect = marqueeContainer.getBoundingClientRect();
         const center = { x: boundingRect.x + boundingRect.width / 2, y: boundingRect.y + boundingRect.height / 2 };
         const downVec = Utils.rotPt(down[0] - center.x,  
@@ -167,7 +169,7 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
 
     @action
     public onInitiateSelection(down: number[]) {
-        this._width = this._height = 0;
+        this.Width = this.Height = 0;
         this._start = this.getTransformedScreenPt(down);
 
         document.removeEventListener('pointermove', this.onSelectMove);
@@ -197,7 +199,7 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
 
             const targetCreator = (annotationOn: Doc | undefined) => {
                 const target = DocUtils.GetNewTextDoc('Note linked to ' + this.props.Document.title, 0, 0, 100, 100, annotationOn, 'yellow');
-                Doc.SetSelectOnLoad(target);
+                DocumentView.SetSelectOnLoad(target);
                 return target;
             };
             DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.docView(), sourceAnchorCreator, targetCreator), e.pageX, e.pageY, {
@@ -219,7 +221,6 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
                   e.preventDefault();
                   e.stopPropagation();
                   let cropRegion: Doc | undefined;
-                  // eslint-disable-next-line no-return-assign
                   const sourceAnchorCreator = () => (cropRegion = this.highlight('', true, undefined, true)); // hyperlink color
                   const targetCreator = (/* annotationOn: Doc | undefined */) => this.props.anchorMenuCrop!(cropRegion, false)!;
                   DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.docView(), sourceAnchorCreator, targetCreator), e.pageX, e.pageY, {
@@ -241,15 +242,15 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
     @action
     onMove = (pt: number[]) => {
         const movLoc = this.getTransformedScreenPt(pt);
-        this._width = movLoc.x - this._start.x;
-        this._height = movLoc.y - this._start.y;
+        this.Width = movLoc.x - this._start.x;
+        this.Height = movLoc.y - this._start.y;
     };
 
     @action
     onSelectMove = (e: PointerEvent) => {
         const movLoc = this.getTransformedScreenPt([e.clientX, e.clientY]);
-        this._width = movLoc.x - this._start.x;
-        this._height = movLoc.y - this._start.y;
+        this.Width = movLoc.x - this._start.x;
+        this.Height = movLoc.y - this._start.y;
         // e.stopPropagation(); // overlay documents are all 'active', yet they can be dragged. if we stop propagation, then they can be marqueed but not dragged.  if we don't stop, then they will be marqueed and dragged, but the marquee will be zero width since the doc will move along with the cursor.
     };
 
@@ -280,11 +281,11 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
             AnchorMenu.Instance.jumpTo(x, y);
         }
         this.props.finishMarquee(this.isEmpty ? x : undefined, this.isEmpty ? y : undefined);
-        this._width = this._height = 0;
+        this.Width = this.Height = 0;
     };
 
     get isEmpty() {
-        return Math.abs(this._width) <= 10 && Math.abs(this._height) <= 10;
+        return Math.abs(this.Width) <= 10 && Math.abs(this.Height) <= 10;
     }
 
     render() {
@@ -294,9 +295,9 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
                 style={{
                     left: `${this.left}px`,
                     top: `${this.top}px`,
-                    width: `${Math.abs(this._width)}px`,
-                    height: `${Math.abs(this._height)}px`,
-                    border: `${this._width === 0 ? '' : '2px dashed black'}`,
+                    width: `${Math.abs(this.Width)}px`,
+                    height: `${Math.abs(this.Height)}px`,
+                    border: `${this.Width === 0 ? '' : '2px dashed black'}`,
                 }}
             />
         );