Remove react-pointable - closes agentcooper#145

nikolas · Jun 22, 2021 · d39089b · d39089b
1 parent 8f707b5
commit d39089b
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 90 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-pdf-highlighter/package-lock.json b/packages/react-pdf-highlighter/package-lock.json
diff --git a/packages/react-pdf-highlighter/package.json b/packages/react-pdf-highlighter/package.json
@@ -14,7 +14,6 @@
   "dependencies": {
     "lodash.debounce": "^4.0.8",
     "pdfjs-dist": "2.8.335",
-    "react-pointable": "^1.1.1",
     "react-rnd": "^10.1.10"
   },
   "peerDependencies": {

diff --git a/packages/react-pdf-highlighter/src/components/PdfHighlighter.js b/packages/react-pdf-highlighter/src/components/PdfHighlighter.js
@@ -1,7 +1,6 @@
 // @flow
 import React, { PureComponent } from "react";
 import ReactDom from "react-dom";
-import Pointable from "react-pointable";
 import debounce from "lodash.debounce";
 
 import { EventBus, PDFViewer, PDFLinkService } from "pdfjs-dist/web/pdf_viewer";
@@ -547,76 +546,75 @@ class PdfHighlighter<T_HT: T_Highlight> extends PureComponent<
     const { onSelectionFinished, enableAreaSelection } = this.props;
 
     return (
-      <Pointable onPointerDown={this.onMouseDown}>
-        <div
-          ref={this.attachRef}
-          className="PdfHighlighter"
-          onContextMenu={e => e.preventDefault()}
-        >
-          <div className="pdfViewer" />
-          {this.renderTip()}
-          {typeof enableAreaSelection === "function" ? (
-            <MouseSelection
-              onDragStart={() => this.toggleTextSelection(true)}
-              onDragEnd={() => this.toggleTextSelection(false)}
-              onChange={isVisible =>
-                this.setState({ isAreaSelectionInProgress: isVisible })
-              }
-              shouldStart={event =>
-                enableAreaSelection(event) &&
-                isHTMLElement(event.target) &&
-                Boolean(asElement(event.target).closest(".page"))
+      <div
+        ref={this.attachRef}
+        onPointerDown={this.onMouseDown}
+        className="PdfHighlighter"
+        onContextMenu={e => e.preventDefault()}
+      >
+        <div className="pdfViewer" />
+        {this.renderTip()}
+        {typeof enableAreaSelection === "function" ? (
+          <MouseSelection
+            onDragStart={() => this.toggleTextSelection(true)}
+            onDragEnd={() => this.toggleTextSelection(false)}
+            onChange={isVisible =>
+              this.setState({ isAreaSelectionInProgress: isVisible })
+            }
+            shouldStart={event =>
+              enableAreaSelection(event) &&
+              isHTMLElement(event.target) &&
+              Boolean(asElement(event.target).closest(".page"))
+            }
+            onSelection={(startTarget, boundingRect, resetSelection) => {
+              const page = getPageFromElement(startTarget);
+
+              if (!page) {
+                return;
               }
-              onSelection={(startTarget, boundingRect, resetSelection) => {
-                const page = getPageFromElement(startTarget);
 
-                if (!page) {
-                  return;
-                }
-
-                const pageBoundingRect = {
-                  ...boundingRect,
-                  top: boundingRect.top - page.node.offsetTop,
-                  left: boundingRect.left - page.node.offsetLeft
-                };
-
-                const viewportPosition = {
-                  boundingRect: pageBoundingRect,
-                  rects: [],
-                  pageNumber: page.number
-                };
-
-                const scaledPosition =
-                  this.viewportPositionToScaled(viewportPosition);
-
-                const image = this.screenshot(pageBoundingRect, page.number);
-
-                this.setTip(
-                  viewportPosition,
-                  onSelectionFinished(
-                    scaledPosition,
-                    { image },
-                    () => this.hideTipAndSelection(),
-                    () =>
-                      this.setState(
-                        {
-                          ghostHighlight: {
-                            position: scaledPosition,
-                            content: { image }
-                          }
-                        },
-                        () => {
-                          resetSelection();
-                          this.renderHighlights();
-                        }
-                      )
-                  )
-                );
-              }}
-            />
-          ) : null}
+              const pageBoundingRect = {
+                ...boundingRect,
+                top: boundingRect.top - page.node.offsetTop,
+                left: boundingRect.left - page.node.offsetLeft
+              };
+
+              const viewportPosition = {
+                boundingRect: pageBoundingRect,
+                rects: [],
+                pageNumber: page.number
+              };
+
+              const scaledPosition =
+                this.viewportPositionToScaled(viewportPosition);
+
+              const image = this.screenshot(pageBoundingRect, page.number);
+
+              this.setTip(
+                viewportPosition,
+                onSelectionFinished(
+                  scaledPosition,
+                  { image },
+                  () => this.hideTipAndSelection(),
+                  () =>
+                    this.setState(
+                      {
+                        ghostHighlight: {
+                          position: scaledPosition,
+                          content: { image }
+                      }
+                      },
+                      () => {
+                        resetSelection();
+                        this.renderHighlights();
+                      }
+                    )
+                )
+              );
+            }}
+          />
+        ) : null}
         </div>
-      </Pointable>
     );
   }
 }