fixed annotations on web pages to be scaled to the correct location.

2 files changed, 20 insertions, 16 deletions

diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index eca0138a0..c12059943 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -742,18 +742,19 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         </div>
                     </div>
                     {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
-                        <MarqueeAnnotator rootDoc={this.rootDoc}
-                            iframe={this.isFirefox() ? this.iframeClick : undefined}
-                            iframeScaling={this.isFirefox() ? this.iframeScaling : undefined}
-                            anchorMenuClick={this.anchorMenuClick}
-                            scrollTop={0}
-                            down={this._marqueeing} scaling={returnOne}
-                            addDocument={this.addDocumentWrapper}
-                            docView={this.props.docViewPath().lastElement()}
-                            finishMarquee={this.finishMarquee}
-                            savedAnnotations={this._savedAnnotations}
-                            annotationLayer={this._annotationLayer.current}
-                            mainCont={this._mainCont.current} />}
+                        <div style={{ transformOrigin: "top left", transform: `scale(${1 / scale})` }}>
+                            <MarqueeAnnotator rootDoc={this.rootDoc}
+                                iframe={this.isFirefox() ? this.iframeClick : undefined}
+                                iframeScaling={this.isFirefox() ? this.iframeScaling : undefined}
+                                anchorMenuClick={this.anchorMenuClick}
+                                scrollTop={0}
+                                down={this._marqueeing} scaling={returnOne}
+                                addDocument={this.addDocumentWrapper}
+                                docView={this.props.docViewPath().lastElement()}
+                                finishMarquee={this.finishMarquee}
+                                savedAnnotations={this._savedAnnotations}
+                                annotationLayer={this._annotationLayer.current}
+                                mainCont={this._mainCont.current} /> </div>}
                 </div >
                 <div className="webBox-sideResizer" style={{
                     display: this.SidebarShown ? undefined : "none",
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 1856c5353..651b0401b 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -580,14 +580,17 @@ export class PDFViewer extends React.Component<IViewerProps> {
                 {this.overlayInfo}
                 {this.standinViews}
                 {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
-                    <MarqueeAnnotator rootDoc={this.props.rootDoc} scrollTop={0} down={this._marqueeing}
+                    <MarqueeAnnotator rootDoc={this.props.rootDoc}
+                        getPageFromScroll={this.getPageFromScroll}
                         anchorMenuClick={this.props.anchorMenuClick}
+                        scrollTop={0}
+                        down={this._marqueeing}
                         addDocument={(doc: Doc | Doc[]) => this.props.addDocument!(doc)}
-                        finishMarquee={this.finishMarquee}
                         docView={this.props.docViewPath().lastElement()}
-                        getPageFromScroll={this.getPageFromScroll}
+                        finishMarquee={this.finishMarquee}
                         savedAnnotations={this._savedAnnotations}
-                        annotationLayer={this._annotationLayer.current} mainCont={this._mainCont.current} />}
+                        annotationLayer={this._annotationLayer.current}
+                        mainCont={this._mainCont.current} />}
             </div>
         </div>;
     }