@rzymek/react-pdf-highlighter 8.0.1-rc.0

package/dist/src/components/Tip.js

@@ -0,0 +1,82 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+import styles from "../style/Tip.module.css.js";
+class Tip extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", {
+      compact: true,
+      text: "",
+      emoji: ""
+    });
+  }
+  // for TipContainer
+  componentDidUpdate(_, nextState) {
+    const { onUpdate } = this.props;
+    if (onUpdate && this.state.compact !== nextState.compact) {
+      onUpdate();
+    }
+  }
+  render() {
+    const { onConfirm, onOpen } = this.props;
+    const { compact, text, emoji } = this.state;
+    return /* @__PURE__ */ jsx("div", { children: compact ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.compact,
+        onClick: () => {
+          onOpen();
+          this.setState({ compact: false });
+        },
+        children: "Add highlight"
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: styles.card,
+        onSubmit: (event) => {
+          event.preventDefault();
+          onConfirm({ text, emoji });
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                placeholder: "Your comment",
+                autoFocus: true,
+                value: text,
+                onChange: (event) => this.setState({ text: event.target.value }),
+                ref: (node) => {
+                  if (node) {
+                    node.focus();
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { children: ["💩", "😱", "😍", "🔥", "😳", "⚠️"].map((_emoji) => /* @__PURE__ */ jsxs("label", { children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  checked: emoji === _emoji,
+                  type: "radio",
+                  name: "emoji",
+                  value: _emoji,
+                  onChange: (event) => this.setState({ emoji: event.target.value })
+                }
+              ),
+              _emoji
+            ] }, _emoji)) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("input", { type: "submit", value: "Save" }) })
+        ]
+      }
+    ) });
+  }
+}
+export {
+  Tip
+};

package/dist/src/components/TipContainer.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import styles from "../style/TipContainer.module.css.js";
+function clamp(value, left, right) {
+  return Math.min(Math.max(value, left), right);
+}
+function TipContainer({
+  children,
+  style,
+  scrollTop,
+  pageBoundingRect
+}) {
+  const [height, setHeight] = useState(0);
+  const [width, setWidth] = useState(0);
+  const nodeRef = useRef(null);
+  const updatePosition = useCallback(() => {
+    if (!nodeRef.current) {
+      return;
+    }
+    const { offsetHeight, offsetWidth } = nodeRef.current;
+    setHeight(offsetHeight);
+    setWidth(offsetWidth);
+  }, []);
+  useEffect(() => {
+    setTimeout(updatePosition, 0);
+  }, [updatePosition]);
+  const isStyleCalculationInProgress = width === 0 && height === 0;
+  const shouldMove = style.top - height - 5 < scrollTop;
+  const top = shouldMove ? style.bottom + 5 : style.top - height - 5;
+  const left = clamp(style.left - width / 2, 0, pageBoundingRect.width - width);
+  const handleUpdate = useCallback(() => {
+    setWidth(0);
+    setHeight(0);
+    setTimeout(updatePosition, 0);
+  }, [updatePosition]);
+  const childrenWithProps = React.Children.map(
+    children,
+    (child) => child != null ? React.cloneElement(child, {
+      onUpdate: handleUpdate,
+      popup: {
+        position: shouldMove ? "below" : "above"
+      }
+    }) : null
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: "PdfHighlighter__tip-container",
+      className: styles.tipContainer,
+      style: {
+        visibility: isStyleCalculationInProgress ? "hidden" : "visible",
+        top,
+        left
+      },
+      ref: nodeRef,
+      children: childrenWithProps
+    }
+  );
+}
+export {
+  TipContainer
+};

package/dist/src/index.js

@@ -0,0 +1,15 @@
+import { PdfHighlighter } from "./components/PdfHighlighter.js";
+import { Tip } from "./components/Tip.js";
+import { Highlight } from "./components/Highlight.js";
+import { Popup } from "./components/Popup.js";
+import { AreaHighlight } from "./components/AreaHighlight.js";
+import { PdfLoader } from "./components/PdfLoader.js";
+/* empty css                */
+export {
+  AreaHighlight,
+  Highlight,
+  PdfHighlighter,
+  PdfLoader,
+  Popup,
+  Tip
+};

package/dist/src/lib/coordinates.js

@@ -0,0 +1,50 @@
+const viewportToScaled = (rect, { width, height }) => {
+  return {
+    x1: rect.left,
+    y1: rect.top,
+    x2: rect.left + rect.width,
+    y2: rect.top + rect.height,
+    width,
+    height,
+    pageNumber: rect.pageNumber
+  };
+};
+const pdfToViewport = (pdf, viewport) => {
+  const [x1, y1, x2, y2] = viewport.convertToViewportRectangle([
+    pdf.x1,
+    pdf.y1,
+    pdf.x2,
+    pdf.y2
+  ]);
+  return {
+    left: Math.min(x1, x2),
+    top: Math.min(y1, y2),
+    width: Math.abs(x2 - x1),
+    height: Math.abs(y1 - y2),
+    pageNumber: pdf.pageNumber
+  };
+};
+const scaledToViewport = (scaled, viewport, usePdfCoordinates = false) => {
+  const { width, height } = viewport;
+  if (usePdfCoordinates) {
+    return pdfToViewport(scaled, viewport);
+  }
+  if (scaled.x1 === void 0) {
+    throw new Error("You are using old position format, please update");
+  }
+  const x1 = width * scaled.x1 / scaled.width;
+  const y1 = height * scaled.y1 / scaled.height;
+  const x2 = width * scaled.x2 / scaled.width;
+  const y2 = height * scaled.y2 / scaled.height;
+  return {
+    left: x1,
+    top: y1,
+    width: x2 - x1,
+    height: y2 - y1,
+    pageNumber: scaled.pageNumber
+  };
+};
+export {
+  scaledToViewport,
+  viewportToScaled
+};

package/dist/src/lib/get-area-as-png.js

@@ -0,0 +1,31 @@
+import { isHTMLCanvasElement } from "./pdfjs-dom.js";
+const getAreaAsPNG = (canvas, position) => {
+  const { left, top, width, height } = position;
+  const doc = canvas ? canvas.ownerDocument : null;
+  const newCanvas = doc == null ? void 0 : doc.createElement("canvas");
+  if (!newCanvas || !isHTMLCanvasElement(newCanvas)) {
+    return "";
+  }
+  newCanvas.width = width;
+  newCanvas.height = height;
+  const newCanvasContext = newCanvas.getContext("2d");
+  if (!newCanvasContext || !canvas) {
+    return "";
+  }
+  const dpr = window.devicePixelRatio;
+  newCanvasContext.drawImage(
+    canvas,
+    left * dpr,
+    top * dpr,
+    width * dpr,
+    height * dpr,
+    0,
+    0,
+    width,
+    height
+  );
+  return newCanvas.toDataURL("image/png");
+};
+export {
+  getAreaAsPNG
+};

package/dist/src/lib/get-bounding-rect.js

@@ -0,0 +1,40 @@
+const getBoundingRect = (clientRects) => {
+  const rects = Array.from(clientRects).map((rect) => {
+    const { left, top, width, height, pageNumber: pageNumber2 } = rect;
+    const X02 = left;
+    const X12 = left + width;
+    const Y02 = top;
+    const Y12 = top + height;
+    return { X0: X02, X1: X12, Y0: Y02, Y1: Y12, pageNumber: pageNumber2 };
+  });
+  let firstPageNumber = Number.MAX_SAFE_INTEGER;
+  for (const rect of rects) {
+    firstPageNumber = Math.min(
+      firstPageNumber,
+      rect.pageNumber ?? firstPageNumber
+    );
+  }
+  const rectsWithSizeOnFirstPage = rects.filter(
+    (rect) => (rect.X0 > 0 || rect.X1 > 0 || rect.Y0 > 0 || rect.Y1 > 0) && rect.pageNumber === firstPageNumber
+  );
+  const optimal = rectsWithSizeOnFirstPage.reduce((res, rect) => {
+    return {
+      X0: Math.min(res.X0, rect.X0),
+      X1: Math.max(res.X1, rect.X1),
+      Y0: Math.min(res.Y0, rect.Y0),
+      Y1: Math.max(res.Y1, rect.Y1),
+      pageNumber: firstPageNumber
+    };
+  }, rectsWithSizeOnFirstPage[0]);
+  const { X0, X1, Y0, Y1, pageNumber } = optimal;
+  return {
+    left: X0,
+    top: Y0,
+    width: X1 - X0,
+    height: Y1 - Y0,
+    pageNumber
+  };
+};
+export {
+  getBoundingRect
+};

package/dist/src/lib/get-client-rects.js

@@ -0,0 +1,39 @@
+import { optimizeClientRects } from "./optimize-client-rects.js";
+const isClientRectInsidePageRect = (clientRect, pageRect) => {
+  if (clientRect.top < pageRect.top) {
+    return false;
+  }
+  if (clientRect.bottom > pageRect.bottom) {
+    return false;
+  }
+  if (clientRect.right > pageRect.right) {
+    return false;
+  }
+  if (clientRect.left < pageRect.left) {
+    return false;
+  }
+  return true;
+};
+const getClientRects = (range, pages, shouldOptimize = true) => {
+  const clientRects = Array.from(range.getClientRects());
+  const rects = [];
+  for (const clientRect of clientRects) {
+    for (const page of pages) {
+      const pageRect = page.node.getBoundingClientRect();
+      if (isClientRectInsidePageRect(clientRect, pageRect) && clientRect.width > 0 && clientRect.height > 0 && clientRect.width < pageRect.width && clientRect.height < pageRect.height) {
+        const highlightedRect = {
+          top: clientRect.top + page.node.scrollTop - pageRect.top,
+          left: clientRect.left + page.node.scrollLeft - pageRect.left,
+          width: clientRect.width,
+          height: clientRect.height,
+          pageNumber: page.number
+        };
+        rects.push(highlightedRect);
+      }
+    }
+  }
+  return shouldOptimize ? optimizeClientRects(rects) : rects;
+};
+export {
+  getClientRects
+};

package/dist/src/lib/optimize-client-rects.js

@@ -0,0 +1,54 @@
+const sort = (rects) => rects.sort((A, B) => {
+  const top = (A.pageNumber || 0) * A.top - (B.pageNumber || 0) * B.top;
+  if (top === 0) {
+    return A.left - B.left;
+  }
+  return top;
+});
+const overlaps = (A, B) => A.pageNumber === B.pageNumber && A.left <= B.left && B.left <= A.left + A.width;
+const sameLine = (A, B, yMargin = 5) => A.pageNumber === B.pageNumber && Math.abs(A.top - B.top) < yMargin && Math.abs(A.height - B.height) < yMargin;
+const inside = (A, B) => A.pageNumber === B.pageNumber && A.top > B.top && A.left > B.left && A.top + A.height < B.top + B.height && A.left + A.width < B.left + B.width;
+const nextTo = (A, B, xMargin = 10) => {
+  const Aright = A.left + A.width;
+  const Bright = B.left + B.width;
+  return A.pageNumber === B.pageNumber && A.left <= B.left && Aright <= Bright && B.left - Aright <= xMargin;
+};
+const extendWidth = (A, B) => {
+  A.width = Math.max(B.width - A.left + B.left, A.width);
+};
+const optimizeClientRects = (clientRects) => {
+  const rects = sort(clientRects);
+  const toRemove = /* @__PURE__ */ new Set();
+  const firstPass = rects.filter((rect) => {
+    return rects.every((otherRect) => {
+      return !inside(rect, otherRect);
+    });
+  });
+  let passCount = 0;
+  while (passCount <= 2) {
+    for (const A of firstPass) {
+      for (const B of firstPass) {
+        if (A === B || toRemove.has(A) || toRemove.has(B)) {
+          continue;
+        }
+        if (!sameLine(A, B)) {
+          continue;
+        }
+        if (overlaps(A, B)) {
+          extendWidth(A, B);
+          A.height = Math.max(A.height, B.height);
+          toRemove.add(B);
+        }
+        if (nextTo(A, B)) {
+          extendWidth(A, B);
+          toRemove.add(B);
+        }
+      }
+    }
+    passCount += 1;
+  }
+  return firstPass.filter((rect) => !toRemove.has(rect));
+};
+export {
+  optimizeClientRects
+};

package/dist/src/lib/pdfjs-dom.js

@@ -0,0 +1,64 @@
+const getDocument = (element) => element.ownerDocument || document;
+const getWindow = (element) => getDocument(element).defaultView || window;
+const isHTMLElement = (element) => element != null && (element instanceof HTMLElement || element instanceof getWindow(element).HTMLElement);
+const isHTMLCanvasElement = (element) => element instanceof HTMLCanvasElement || element instanceof getWindow(element).HTMLCanvasElement;
+const getPageFromElement = (target) => {
+  const node = target.closest(".page");
+  if (!isHTMLElement(node)) {
+    return null;
+  }
+  const number = Number(node.dataset.pageNumber);
+  return { node, number };
+};
+const getPagesFromRange = (range) => {
+  const startParentElement = range.startContainer.parentElement;
+  const endParentElement = range.endContainer.parentElement;
+  if (!isHTMLElement(startParentElement) || !isHTMLElement(endParentElement)) {
+    return [];
+  }
+  const startPage = getPageFromElement(startParentElement);
+  const endPage = getPageFromElement(endParentElement);
+  if (!(startPage == null ? void 0 : startPage.number) || !(endPage == null ? void 0 : endPage.number)) {
+    return [];
+  }
+  if (startPage.number === endPage.number) {
+    return [startPage];
+  }
+  if (startPage.number === endPage.number - 1) {
+    return [startPage, endPage];
+  }
+  const pages = [];
+  let currentPageNumber = startPage.number;
+  const document2 = startPage.node.ownerDocument;
+  while (currentPageNumber <= endPage.number) {
+    const currentPage = getPageFromElement(
+      document2.querySelector(
+        `[data-page-number='${currentPageNumber}'`
+      )
+    );
+    if (currentPage) {
+      pages.push(currentPage);
+    }
+    currentPageNumber++;
+  }
+  return pages;
+};
+const findOrCreateContainerLayer = (container, className, selector) => {
+  const doc = getDocument(container);
+  let layer = container.querySelector(selector);
+  if (!layer) {
+    layer = doc.createElement("div");
+    layer.className = className;
+    container.appendChild(layer);
+  }
+  return layer;
+};
+export {
+  findOrCreateContainerLayer,
+  getDocument,
+  getPageFromElement,
+  getPagesFromRange,
+  getWindow,
+  isHTMLCanvasElement,
+  isHTMLElement
+};

package/dist/src/style/AreaHighlight.module.css.js

@@ -0,0 +1,14 @@
+const areaHighlight = "_areaHighlight_1ppoh_1";
+const part = "_part_1ppoh_8";
+const scrolledTo = "_scrolledTo_1ppoh_15";
+const styles = {
+  areaHighlight,
+  part,
+  scrolledTo
+};
+export {
+  areaHighlight,
+  styles as default,
+  part,
+  scrolledTo
+};

package/dist/src/style/Highlight.module.css.js

@@ -0,0 +1,20 @@
+const highlight = "_highlight_3l4zw_1";
+const emoji = "_emoji_3l4zw_5";
+const parts = "_parts_3l4zw_12";
+const part = "_part_3l4zw_12";
+const scrolledTo = "_scrolledTo_3l4zw_23";
+const styles = {
+  highlight,
+  emoji,
+  parts,
+  part,
+  scrolledTo
+};
+export {
+  styles as default,
+  emoji,
+  highlight,
+  part,
+  parts,
+  scrolledTo
+};

package/dist/src/style/MouseSelection.module.css.js

@@ -0,0 +1,8 @@
+const mouseSelection = "_mouseSelection_1p43j_1";
+const styles = {
+  mouseSelection
+};
+export {
+  styles as default,
+  mouseSelection
+};

package/dist/src/style/PdfHighlighter.module.css.js

@@ -0,0 +1,14 @@
+const container = "_container_12oj9_1";
+const highlightLayer = "_highlightLayer_12oj9_8";
+const disableSelection = "_disableSelection_12oj9_19";
+const styles = {
+  container,
+  highlightLayer,
+  disableSelection
+};
+export {
+  container,
+  styles as default,
+  disableSelection,
+  highlightLayer
+};

package/dist/src/style/Tip.module.css.js

@@ -0,0 +1,11 @@
+const compact = "_compact_1um8o_1";
+const card = "_card_1um8o_10";
+const styles = {
+  compact,
+  card
+};
+export {
+  card,
+  compact,
+  styles as default
+};

package/dist/src/style/TipContainer.module.css.js

@@ -0,0 +1,8 @@
+const tipContainer = "_tipContainer_f56kr_1";
+const styles = {
+  tipContainer
+};
+export {
+  styles as default,
+  tipContainer
+};