aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/MainView.tsx6
-rw-r--r--src/client/views/pdf/PDFMenu.scss18
-rw-r--r--src/client/views/pdf/PDFMenu.tsx28
-rw-r--r--src/client/views/pdf/Page.tsx96
4 files changed, 121 insertions, 27 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 879c2aca0..384cd2860 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt, faBell } from '@fortawesome/free-solid-svg-icons';
+import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt, faBell, faCommentAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, configure, observable, runInAction, trace } from 'mobx';
import { observer } from 'mobx-react';
@@ -33,6 +33,7 @@ import { listSpec } from '../../new_fields/Schema';
import { Id } from '../../new_fields/FieldSymbols';
import { HistoryUtil } from '../util/History';
import { CollectionBaseView } from './collections/CollectionBaseView';
+import PDFMenu from './pdf/PDFMenu';
import { InkTool } from '../../new_fields/InkField';
@@ -90,6 +91,7 @@ export class MainView extends React.Component {
library.add(faFilm);
library.add(faMusic);
library.add(faTree);
+ library.add(faCommentAlt);
this.initEventListeners();
this.initAuthenticationRouters();
}
@@ -323,6 +325,8 @@ export class MainView extends React.Component {
<ContextMenu />
{this.nodesMenu()}
{this.miscButtons}
+ <InkingControl />
+ <PDFMenu />
<MainOverlayTextBox />
</div>
);
diff --git a/src/client/views/pdf/PDFMenu.scss b/src/client/views/pdf/PDFMenu.scss
new file mode 100644
index 000000000..b84ebc12d
--- /dev/null
+++ b/src/client/views/pdf/PDFMenu.scss
@@ -0,0 +1,18 @@
+.pdfMenu-cont {
+ position: absolute;
+ z-index: 10000;
+ width: 100px;
+ height: 30px;
+ background: #323232;
+ box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
+ border-radius: 0px 4px 4px 4px;
+ overflow: hidden;
+
+ .pdfMenu-button {
+ background-color: transparent;
+ }
+
+ .pdfMenu-button:hover {
+ background-color: #121212;
+ }
+} \ No newline at end of file
diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx
new file mode 100644
index 000000000..cc5c0b77b
--- /dev/null
+++ b/src/client/views/pdf/PDFMenu.tsx
@@ -0,0 +1,28 @@
+import React = require("react");
+import "./PDFMenu.scss";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+@observer
+export default class PDFMenu extends React.Component {
+ static Instance: PDFMenu;
+
+ @observable Top: number = 0;
+ @observable Left: number = 0;
+
+ constructor(props: Readonly<{}>) {
+ super(props);
+
+ PDFMenu.Instance = this;
+ }
+
+ render() {
+ return (
+ <div className="pdfMenu-cont" style={{ left: this.Left, top: this.Top }}>
+ <button className="pdfMenu-button" title="Highlight"><FontAwesomeIcon icon="highlighter" size="sm" /></button>
+ <button className="pdfMenu-button" title="Annotate"><FontAwesomeIcon icon="comment-alt" size="sm" /></button>
+ </div>
+ )
+ }
+} \ No newline at end of file
diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx
index fa3f7baca..bdb6952cc 100644
--- a/src/client/views/pdf/Page.tsx
+++ b/src/client/views/pdf/Page.tsx
@@ -14,6 +14,7 @@ import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
import { listSpec } from "../../../new_fields/Schema";
import { menuBar } from "prosemirror-menu";
import { AnnotationTypes } from "./PDFViewer";
+import PDFMenu from "./PDFMenu";
interface IPageProps {
pdf: Opt<Pdfjs.PDFDocumentProxy>;
@@ -271,7 +272,7 @@ export default class Page extends React.Component<IPageProps> {
}
@action
- onSelectEnd = (): void => {
+ onSelectEnd = (e: PointerEvent): void => {
if (this._marqueeing) {
this._marqueeing = false;
if (this._marquee.current) {
@@ -302,36 +303,79 @@ export default class Page extends React.Component<IPageProps> {
}
this._marqueeHeight = this._marqueeWidth = 0;
+ PDFMenu.Instance.Left = e.clientX;
+ PDFMenu.Instance.Top = e.clientY;
}
else {
let sel = window.getSelection();
- // if selecting over a range of things
- if (sel && sel.type === "Range") {
- let clientRects = sel.getRangeAt(0).getClientRects();
- if (this._textLayer.current) {
- let boundingRect = this._textLayer.current.getBoundingClientRect();
- for (let i = 0; i < clientRects.length; i++) {
- let rect = clientRects.item(i);
- if (rect) {
- let annoBox = document.createElement("div");
- annoBox.className = "pdfViewer-annotationBox";
- // transforms the positions from screen onto the pdf div
- annoBox.style.top = ((rect.top - boundingRect.top) * (this._textLayer.current.offsetHeight / boundingRect.height)).toString();
- annoBox.style.left = ((rect.left - boundingRect.left) * (this._textLayer.current.offsetWidth / boundingRect.width)).toString();
- annoBox.style.width = (rect.width * this._textLayer.current.offsetWidth / boundingRect.width).toString();
- annoBox.style.height = (rect.height * this._textLayer.current.offsetHeight / boundingRect.height).toString();
- this.props.createAnnotation(annoBox, this.props.page);
- }
- }
- }
- // clear selection
- if (sel.empty) { // Chrome
- sel.empty();
- } else if (sel.removeAllRanges) { // Firefox
- sel.removeAllRanges();
- }
+ if (sel && sel.type === "range") {
+
+ PDFMenu.Instance.Left = e.clientX;
+ PDFMenu.Instance.Top = e.clientY;
}
}
+ // let x = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width);
+ // let y = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height);
+ // if (this._marqueeing) {
+ // this._marqueeing = false;
+ // if (this._marquee.current) {
+ // let copy = document.createElement("div");
+ // // make a copy of the marquee
+ // copy.style.left = this._marquee.current.style.left;
+ // copy.style.top = this._marquee.current.style.top;
+ // copy.style.width = this._marquee.current.style.width;
+ // copy.style.height = this._marquee.current.style.height;
+
+ // // apply the appropriate background, opacity, and transform
+ // let { background, opacity, transform } = this.getCurlyTransform();
+ // copy.style.background = background;
+ // // if curly bracing, add a curly brace
+ // if (opacity === "1" && this._curly.current) {
+ // copy.style.opacity = opacity;
+ // let img = this._curly.current.cloneNode();
+ // (img as any).style.opacity = opacity;
+ // (img as any).style.transform = transform;
+ // copy.appendChild(img);
+ // }
+ // else {
+ // copy.style.opacity = this._marquee.current.style.opacity;
+ // }
+ // copy.className = this._marquee.current.className;
+ // this.props.createAnnotation(copy, this.props.page);
+ // this._marquee.current.style.opacity = "0";
+ // }
+
+ // this._marqueeHeight = this._marqueeWidth = 0;
+ // }
+ // else {
+ // let sel = window.getSelection();
+ // // if selecting over a range of things
+ // if (sel && sel.type === "Range") {
+ // let clientRects = sel.getRangeAt(0).getClientRects();
+ // if (this._textLayer.current) {
+ // let boundingRect = this._textLayer.current.getBoundingClientRect();
+ // for (let i = 0; i < clientRects.length; i++) {
+ // let rect = clientRects.item(i);
+ // if (rect) {
+ // let annoBox = document.createElement("div");
+ // annoBox.className = "pdfViewer-annotationBox";
+ // // transforms the positions from screen onto the pdf div
+ // annoBox.style.top = ((rect.top - boundingRect.top) * (this._textLayer.current.offsetHeight / boundingRect.height)).toString();
+ // annoBox.style.left = ((rect.left - boundingRect.left) * (this._textLayer.current.offsetWidth / boundingRect.width)).toString();
+ // annoBox.style.width = (rect.width * this._textLayer.current.offsetWidth / boundingRect.width).toString();
+ // annoBox.style.height = (rect.height * this._textLayer.current.offsetHeight / boundingRect.height).toString();
+ // this.props.createAnnotation(annoBox, this.props.page);
+ // }
+ // }
+ // }
+ // // clear selection
+ // if (sel.empty) { // Chrome
+ // sel.empty();
+ // } else if (sel.removeAllRanges) { // Firefox
+ // sel.removeAllRanges();
+ // }
+ // }
+ // }
document.removeEventListener("pointermove", this.onSelectStart);
document.removeEventListener("pointerup", this.onSelectEnd);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-15 00:07:31 +0000