aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/pdf/Page.tsx116
1 files changed, 63 insertions, 53 deletions
diff --git a/src/client/views/pdf/Page.tsx b/src/client/views/pdf/Page.tsx
index 7cd72b27f..940f31f41 100644
--- a/src/client/views/pdf/Page.tsx
+++ b/src/client/views/pdf/Page.tsx
@@ -211,19 +211,19 @@ export default class Page extends React.Component<IPageProps> {
else {
e.stopPropagation();
// set marquee x and y positions to the spatially transformed position
- let current = this._textLayer.current;
- if (current) {
- let boundingRect = current.getBoundingClientRect();
- this._marqueeX = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width);
- this._marqueeY = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height);
- }
+ let current = this._textLayer.current;
+ if (current) {
+ let boundingRect = current.getBoundingClientRect();
+ this._marqueeX = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width);
+ this._marqueeY = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height);
+ }
this._marqueeing = true;
if (this._marquee.current) this._marquee.current.style.opacity = "0.2";
}
- document.removeEventListener("pointermove", this.onPointerMove);
- document.addEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
- document.addEventListener("pointerup", this.onPointerUp);
+ document.removeEventListener("pointermove", this.onSelectStart);
+ document.addEventListener("pointermove", this.onSelectStart);
+ document.removeEventListener("pointerup", this.onSelectEnd);
+ document.addEventListener("pointerup", this.onSelectEnd);
if (!e.ctrlKey) {
for (let anno of this._currentAnnotations) {
anno.remove();
@@ -234,37 +234,20 @@ export default class Page extends React.Component<IPageProps> {
}
@action
- onPointerMove = (e: PointerEvent) => {
+ onSelectStart = (e: PointerEvent) => {
let target: any = e.target;
if (this._marqueeing) {
let current = this._textLayer.current;
if (current) {
+ // transform positions and find the width and height to set the marquee to
let boundingRect = current.getBoundingClientRect();
this._marqueeWidth = (e.clientX - boundingRect.left) * (current.offsetWidth / boundingRect.width) - this._marqueeX;
this._marqueeHeight = (e.clientY - boundingRect.top) * (current.offsetHeight / boundingRect.height) - this._marqueeY;
+ let { background, opacity, transform: transform } = this.getCurlyTransform();
if (this._marquee.current && this._curly.current) {
- if (this._marqueeWidth > 100 && this._marqueeHeight > 100) {
- this._marquee.current.style.background = "red";
- this._curly.current.style.opacity = "0";
- }
- else {
- this._marquee.current.style.background = "transparent";
- this._curly.current.style.opacity = "1";
- }
-
- let ratio = this._marqueeWidth / this._marqueeHeight;
- if (ratio > 1.5) {
- // vertical
- this._rotate = "rotate(90deg) scale(1, 2)";
- }
- else if (ratio < 0.5) {
- // horizontal
- this._rotate = "scale(2, 1)";
- }
- else {
- // diagonal
- this._rotate = "rotate(45deg) scale(1.5, 1.5)";
- }
+ this._marquee.current.style.background = background;
+ this._curly.current.style.opacity = opacity;
+ this._rotate = transform;
}
}
e.stopPropagation();
@@ -275,25 +258,62 @@ export default class Page extends React.Component<IPageProps> {
}
}
- startAnnotation = () => {
- console.log("drag starting");
- }
+ getCurlyTransform = (): { background: string, opacity: string, transform: string } => {
+ let background = "", opacity = "", transform = "";
+ if (this._marquee.current && this._curly.current) {
+ if (this._marqueeWidth > 100 && this._marqueeHeight > 100) {
+ background = "red";
+ opacity = "0";
+ }
+ else {
+ background = "transparent";
+ opacity = "1";
+ }
- pointerDownCancel = (e: PointerEvent) => {
- e.stopPropagation();
+ // split up for simplicity, could be done in a nested ternary. please do not. -syip2
+ let ratio = this._marqueeWidth / this._marqueeHeight;
+ if (ratio > 1.5) {
+ // vertical
+ transform = "rotate(90deg) scale(1, 2)";
+ }
+ else if (ratio < 0.5) {
+ // horizontal
+ transform = "scale(2, 1)";
+ }
+ else {
+ // diagonal
+ transform = "rotate(45deg) scale(1.5, 1.5)";
+ }
+ }
+ return { background: background, opacity: opacity, transform: transform };
}
@action
- onPointerUp = () => {
+ onSelectEnd = () => {
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;
- copy.style.opacity = this._marquee.current.style.opacity;
+
+ // 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;
if (this._annotationLayer.current) {
this._annotationLayer.current.append(copy);
@@ -321,13 +341,12 @@ export default class Page extends React.Component<IPageProps> {
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();
- annoBox.ondragstart = this.startAnnotation;
- annoBox.onpointerdown = this.pointerDownCancel;
if (this._annotationLayer.current) this._annotationLayer.current.append(annoBox);
this._currentAnnotations.push(annoBox);
}
}
}
+ // clear selection
if (sel.empty) { // Chrome
sel.empty();
} else if (sel.removeAllRanges) { // Firefox
@@ -335,8 +354,8 @@ export default class Page extends React.Component<IPageProps> {
}
}
}
- document.removeEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
+ document.removeEventListener("pointermove", this.onSelectStart);
+ document.removeEventListener("pointerup", this.onSelectEnd);
}
renderAnnotation = (anno: Doc | undefined): HTMLDivElement => {
@@ -348,19 +367,10 @@ export default class Page extends React.Component<IPageProps> {
annoBox.style.left = NumCast(anno.y).toString();
annoBox.style.width = NumCast(anno.width).toString();
annoBox.style.height = NumCast(anno.height).toString()
- annoBox.onpointerdown = this.pointerDownCancel;
}
return annoBox;
}
- annotationPointerDown = () => {
- console.log("annotation");
- }
-
- // imgVisible = () => {
- // return this._marqueeWidth < 100 && this._marqueeHeight < 100 ? { opacity: "1" } : { opacity: "0" }
- // }
-
render() {
let annotations = this._annotations;
return (
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 21:43:54 +0000