aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/MarqueeAnnotator.tsx40
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx1
-rw-r--r--src/client/views/nodes/ImageBox.scss10
-rw-r--r--src/client/views/nodes/ImageBox.tsx43
-rw-r--r--src/client/views/nodes/WebBox.tsx72
-rw-r--r--src/client/views/pdf/PDFViewer.tsx74
6 files changed, 131 insertions, 109 deletions
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index bcc03bea1..fe9c954ca 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, observable, runInAction } from "mobx";
import { observer } from "mobx-react";
import { Dictionary } from "typescript-collections";
import { AclAddonly, AclAdmin, AclEdit, DataSym, Doc, Opt } from "../../fields/Doc";
@@ -19,8 +19,7 @@ const _global = (window /* browser */ || global /* node */) as any;
export interface MarqueeAnnotatorProps {
rootDoc: Doc;
- clientX: number;
- clientY: number;
+ down: number[];
scaling?: () => number;
mainCont: HTMLDivElement;
savedAnnotations: Dictionary<number, HTMLDivElement[]>;
@@ -38,11 +37,22 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
@observable private _width: number = 0;
@observable private _height: number = 0;
+ constructor(props: any) {
+ super(props);
+ runInAction(() => {
+ PDFMenu.Instance.Status = "pdf";
+ PDFMenu.Instance.fadeOut(true);
+ // clear out old marquees and initialize menu for new selection
+ this.props.savedAnnotations.values().forEach(v => v.forEach(a => a.remove()));
+ this.props.savedAnnotations.clear();
+ });
+ }
+
@action componentDidMount() {
// set marquee x and y positions to the spatially transformed position
const boundingRect = this.props.mainCont.getBoundingClientRect();
- this._startX = this._left = (this.props.clientX - boundingRect.left) * (this.props.mainCont.offsetWidth / boundingRect.width);
- this._startY = this._top = (this.props.clientY - boundingRect.top) * (this.props.mainCont.offsetHeight / boundingRect.height) + this.props.mainCont.scrollTop;
+ this._startX = this._left = (this.props.down[0] - boundingRect.left) * (this.props.mainCont.offsetWidth / boundingRect.width);
+ this._startY = this._top = (this.props.down[1] - boundingRect.top) * (this.props.mainCont.offsetHeight / boundingRect.height) + this.props.mainCont.scrollTop;
this._height = this._width = 0;
document.addEventListener("pointermove", this.onSelectMove);
document.addEventListener("pointerup", this.onSelectEnd);
@@ -134,7 +144,6 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
this._width = Math.abs(this._width);
this._height = Math.abs(this._height);
e.stopPropagation();
- e.preventDefault();
}
onSelectEnd = (e: PointerEvent) => {
@@ -142,14 +151,6 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
PDFMenu.Instance.Marquee = { left: this._left, top: this._top, width: this._width, height: this._height };
}
- const marquees = this.props.mainCont.getElementsByClassName("marqueeAnnotator-dragBox");
- if (marquees?.length) { // copy the temporary marquee to allow for multiple selections (not currently available though).
- const copy = document.createElement("div");
- ["left", "top", "width", "height", "border", "opacity"].forEach(prop => copy.style[prop as any] = (marquees[0] as HTMLDivElement).style[prop as any]);
- copy.className = "marqueeAnnotator-annotationBox";
- (copy as any).marqueeing = true;
- MarqueeAnnotator.previewNewAnnotation(this.props.savedAnnotations, this.props.annotationLayer, copy, this.props.getPageFromScroll?.(this._top) || 0);
- }
PDFMenu.Instance.Highlight = this.highlight;
/**
* This function is used by the PDFmenu to create an anchor highlight and a new linked text annotation.
@@ -176,11 +177,22 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
});
if (this._width > 10 || this._height > 10) { // configure and show the annotation/link menu if a the drag region is big enough
+ const marquees = this.props.mainCont.getElementsByClassName("marqueeAnnotator-dragBox");
+ if (marquees?.length) { // copy the temporary marquee to allow for multiple selections (not currently available though).
+ const copy = document.createElement("div");
+ ["left", "top", "width", "height", "border", "opacity"].forEach(prop => copy.style[prop as any] = (marquees[0] as HTMLDivElement).style[prop as any]);
+ copy.className = "marqueeAnnotator-annotationBox";
+ (copy as any).marqueeing = true;
+ MarqueeAnnotator.previewNewAnnotation(this.props.savedAnnotations, this.props.annotationLayer, copy, this.props.getPageFromScroll?.(this._top) || 0);
+ }
+
PDFMenu.Instance.jumpTo(e.clientX, e.clientY);
if (PDFMenu.Instance.Highlighting) {// when highlighter has been toggled when menu is pinned, we auto-highlight immediately on mouse up
this.highlight("rgba(245, 230, 95, 0.75)"); // yellowish highlight color for highlighted text (should match PDFMenu's highlight color)
}
+ } else {
+ runInAction(() => this._width = this._height = 0);
}
this.props.finishMarquee();
}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index d20d1abfc..258e839d0 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -217,6 +217,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
// bcz: do we need this? it kills the context menu on the main collection if !altKey
// e.stopPropagation();
}
+ else PreviewCursor.Visible = false;
}
}
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index c1b95b308..41055e2db 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -5,6 +5,16 @@
position: relative;
transform-origin: top left;
+
+ .imageBox-annotationLayer {
+ position: absolute;
+ transform-origin: left top;
+ top: 0;
+ width: 100%;
+ pointer-events: none;
+ mix-blend-mode: multiply; // bcz: makes text fuzzy!
+ }
+
.imageBox-fader {
pointer-events: inherit;
}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index b0e7f4ce5..e202749aa 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -27,6 +27,10 @@ import { FieldView, FieldViewProps } from './FieldView';
import "./ImageBox.scss";
import React = require("react");
import { StyleProp } from '../StyleProvider';
+import { PDFMenu } from '../pdf/PDFMenu';
+import { Dictionary } from 'typescript-collections';
+import { MarqueeAnnotator } from '../MarqueeAnnotator';
+import { Annotation } from '../pdf/Annotation';
const path = require('path');
const { Howl } = require('howler');
@@ -63,7 +67,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ImageBox, fieldKey); }
private _imgRef: React.RefObject<HTMLImageElement> = React.createRef();
private _dropDisposer?: DragManager.DragDropDisposer;
- private _pathDisposer?: IReactionDisposer;
+ private _disposers: { [name: string]: IReactionDisposer } = {};
@observable private _audioState = 0;
@observable static _showControls: boolean;
@observable uploadIcon = uploadIcons.idle;
@@ -74,7 +78,16 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
}
componentDidMount() {
- this._pathDisposer = reaction(() => ({ nativeSize: this.nativeSize, width: this.layoutDoc[WidthSym]() }),
+ this._disposers.selection = reaction(() => this.props.isSelected(),
+ selected => {
+ if (!selected) {
+ this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove()));
+ this._savedAnnotations.clear();
+ PDFMenu.Instance.fadeOut(true);
+ }
+ },
+ { fireImmediately: true });
+ this._disposers.path = reaction(() => ({ nativeSize: this.nativeSize, width: this.layoutDoc[WidthSym]() }),
action(({ nativeSize, width }) => {
if (!this.layoutDoc._height) {
this.layoutDoc._height = width * nativeSize.nativeHeight / nativeSize.nativeWidth;
@@ -84,7 +97,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
}
componentWillUnmount() {
- this._pathDisposer?.();
+ Object.values(this._disposers).forEach(disposer => disposer?.());
}
@undoBatch
@@ -356,7 +369,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
transform = `translate(-100%, 0%) rotate(${rotation}deg) scale(${aspect})`;
}
- return <div className="imageBox-cont" key={this.layoutDoc[Id]} ref={this.createDropTarget}>
+ return <div className="imageBox-cont" key={this.layoutDoc[Id]} ref={this.createDropTarget} onPointerDown={this.marqueeDown}>
<div className="imageBox-fader" >
<img key={this._smallRetryCount + (this._mediumRetryCount << 4) + (this._largeRetryCount << 8)} // force cache to update on retrys
src={srcpath}
@@ -402,11 +415,28 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.ycenter);
contentFunc = () => [this.content];
+ private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
+ private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
+ @observable _marqueeing: number[] | undefined;
+ @observable _savedAnnotations: Dictionary<number, HTMLDivElement[]> = new Dictionary<number, HTMLDivElement[]>();
+ @computed get annotationLayer() {
+ return <div className="imageBox-annotationLayer" style={{ height: Doc.NativeHeight(this.Document) || undefined }} ref={this._annotationLayer} />;
+ }
+ @action
+ marqueeDown = (e: React.PointerEvent) => {
+ if (!e.altKey && e.button === 0 && this.active(true)) this._marqueeing = [e.clientX, e.clientY];
+ }
+ @action
+ finishMarquee = () => {
+ this._marqueeing = undefined;
+ this.props.select(true);
+ }
+
render() {
TraceMobx();
const borderRad = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding);
const borderRadius = borderRad?.includes("px") ? `${Number(borderRad.split("px")[0]) / (this.props.scaling?.() || 1)}px` : borderRad;
- return (<div className={`imageBox`} onContextMenu={this.specificContextMenu}
+ return (<div className={`imageBox`} onContextMenu={this.specificContextMenu} ref={this._mainCont}
style={{
width: this.props.PanelWidth() ? undefined : `100%`,
height: this.props.PanelWidth() ? undefined : `100%`,
@@ -437,6 +467,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
whenActiveChanged={this.whenActiveChanged}>
{this.contentFunc}
</CollectionFreeFormView>
+ {this.annotationLayer}
+ {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
+ <MarqueeAnnotator rootDoc={this.rootDoc} down={this._marqueeing} scaling={this.props.scaling} addDocument={this.addDocument} finishMarquee={this.finishMarquee} savedAnnotations={this._savedAnnotations} annotationLayer={this._annotationLayer.current} mainCont={this._mainCont.current} />}
</div >);
}
}
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index f9e71bc92..ca3d4448d 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -14,7 +14,7 @@ import { listSpec, makeInterface } from "../../../fields/Schema";
import { Cast, NumCast, StrCast } from "../../../fields/Types";
import { WebField } from "../../../fields/URLField";
import { TraceMobx } from "../../../fields/util";
-import { addStyleSheet, clearStyleSheetRules, emptyFunction, OmitKeys, returnOne, smoothScroll, Utils } from "../../../Utils";
+import { emptyFunction, OmitKeys, returnOne, smoothScroll, Utils } from "../../../Utils";
import { Docs } from "../../documents/Documents";
import { DragManager } from "../../util/DragManager";
import { ImageUtils } from "../../util/Import & Export/ImageUtils";
@@ -38,26 +38,21 @@ const WebDocument = makeInterface(documentSchema);
@observer
export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocument>(WebDocument) {
private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
- static _annotationStyle: any = addStyleSheet();
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(WebBox, fieldKey); }
private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
- private _downX: number = 0;
- private _downY: number = 0;
- @observable private _marqueeing: boolean = false;
+ private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean) => void);
+ private _disposers: { [name: string]: IReactionDisposer } = {};
+ private _longPressSecondsHack?: NodeJS.Timeout;
+ private _outerRef = React.createRef<HTMLDivElement>();
+ private _iframeIndicatorRef = React.createRef<HTMLDivElement>();
+ private _iframeDragRef = React.createRef<HTMLDivElement>();
+ @observable private _marqueeing: number[] | undefined;
@observable private _url: string = "hello";
@observable private _pressX: number = 0;
@observable private _pressY: number = 0;
@observable private _iframe: HTMLIFrameElement | null = null;
@observable private _savedAnnotations: Dictionary<number, HTMLDivElement[]> = new Dictionary<number, HTMLDivElement[]>();
- private _selectionReactionDisposer?: IReactionDisposer;
- private _scrollReactionDisposer?: IReactionDisposer;
- private _scrollTopReactionDisposer?: IReactionDisposer;
- private _moveReactionDisposer?: IReactionDisposer;
- private _longPressSecondsHack?: NodeJS.Timeout;
- private _outerRef = React.createRef<HTMLDivElement>();
- private _iframeIndicatorRef = React.createRef<HTMLDivElement>();
- private _iframeDragRef = React.createRef<HTMLDivElement>();
- private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean) => void);
+
get scrollHeight() { return this.webpage?.scrollHeight || 1000; }
get _collapsed() { return StrCast(this.layoutDoc._chromeStatus) !== "enabled"; }
set _collapsed(value) { this.layoutDoc._chromeStatus = !value ? "enabled" : "disabled"; }
@@ -91,8 +86,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
this.webpage.scrollLeft = NumCast(this.layoutDoc._scrollLeft);
}
}
- this._scrollReactionDisposer?.();
- this._scrollReactionDisposer = reaction(() => ({ scrollY: this.layoutDoc._scrollY, scrollX: this.layoutDoc._scrollX }),
+ this._disposers.scrollReaction?.();
+ this._disposers.scrollReaction = reaction(() => ({ scrollY: this.layoutDoc._scrollY, scrollX: this.layoutDoc._scrollX }),
({ scrollY, scrollX }) => {
const delay = this._outerRef.current ? 0 : 250; // wait for mainCont and try again to scroll
const durationStr = StrCast(this.Document._viewTransition).match(/([0-9]*)ms/);
@@ -110,7 +105,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
},
{ fireImmediately: true }
);
- this._scrollTopReactionDisposer = reaction(() => this.layoutDoc._scrollTop,
+ this._disposers.scrollTop = reaction(() => this.layoutDoc._scrollTop,
scrollTop => {
const durationStr = StrCast(this.Document._viewTransition).match(/([0-9]*)ms/);
const duration = durationStr ? Number(durationStr[1]) : 1000;
@@ -158,14 +153,14 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
const urlField = Cast(this.dataDoc[this.props.fieldKey], WebField);
runInAction(() => this._url = urlField?.url.toString() || "");
- this._moveReactionDisposer = reaction(() => this.layoutDoc.x || this.layoutDoc.y,
+ this._disposers.scrollMove = reaction(() => this.layoutDoc.x || this.layoutDoc.y,
() => this.updateScroll(this.layoutDoc._scrollLeft, this.layoutDoc._scrollTop));
- this._selectionReactionDisposer = reaction(() => this.props.isSelected(),
+ this._disposers.selection = reaction(() => this.props.isSelected(),
selected => {
if (!selected) {
this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove()));
- this._savedAnnotations.keys().forEach(k => this._savedAnnotations.setValue(k, []));
+ this._savedAnnotations.clear();
PDFMenu.Instance.fadeOut(true);
}
},
@@ -194,10 +189,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
}
componentWillUnmount() {
- this._moveReactionDisposer?.();
- this._selectionReactionDisposer?.();
- this._scrollTopReactionDisposer?.();
- this._scrollReactionDisposer?.();
+ Object.values(this._disposers).forEach(disposer => disposer?.());
document.removeEventListener("pointerup", this.onLongPressUp);
document.removeEventListener("pointermove", this.onLongPressMove);
this._iframe?.removeEventListener('wheel', this.iframeWheel);
@@ -471,39 +463,15 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
@action
onMarqueeDown = (e: React.PointerEvent) => {
- this._downX = e.clientX;
- this._downY = e.clientY;
if (!e.altKey && e.button === 0 && this.active(true)) {
- // clear out old marquees and initialize menu for new selection
- PDFMenu.Instance.Status = "pdf";
- PDFMenu.Instance.fadeOut(true);
- this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove()));
- this._savedAnnotations.keys().forEach(k => this._savedAnnotations.setValue(k, []));
- if ((e.target as any)?.parentElement.className === "textLayer") {
- // start selecting text if mouse down on textLayer spans
- }
- else this._marqueeing = true;
- document.addEventListener("pointermove", this.onSelectMove);
- document.addEventListener("pointerup", this.onSelectEnd);
+ this._marqueeing = [e.clientX, e.clientY];
}
}
@action
- onSelectMove = (e: PointerEvent): void => {
- if (e.target && (e.target as any).parentElement === this._mainCont.current) e.stopPropagation();
- }
-
- @action
- finishMarquee = () => { this._marqueeing = false; }
-
- @action
- onSelectEnd = (e: PointerEvent): void => {
- clearStyleSheetRules(WebBox._annotationStyle);
+ finishMarquee = () => {
+ this._marqueeing = undefined;
this.props.select(true);
- this._savedAnnotations.clear();
-
- document.removeEventListener("pointermove", this.onSelectMove);
- document.removeEventListener("pointerup", this.onSelectEnd);
}
scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop));
@@ -562,7 +530,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
</div>
{this.annotationLayer}
{!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
- <MarqueeAnnotator rootDoc={this.rootDoc} scaling={this.props.scaling} addDocument={this.addDocument} finishMarquee={this.finishMarquee} savedAnnotations={this._savedAnnotations} annotationLayer={this._annotationLayer.current} clientX={this._downX} clientY={this._downY} mainCont={this._mainCont.current} />}
+ <MarqueeAnnotator rootDoc={this.rootDoc} down={this._marqueeing} scaling={this.props.scaling} addDocument={this.addDocument} finishMarquee={this.finishMarquee} savedAnnotations={this._savedAnnotations} annotationLayer={this._annotationLayer.current} mainCont={this._mainCont.current} />}
</div >
{this.props.isSelected() ? this.editToggleBtn() : null}
</div>);
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 03ffdb2db..26f936c66 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -68,7 +68,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
@observable private _savedAnnotations: Dictionary<number, HTMLDivElement[]> = new Dictionary<number, HTMLDivElement[]>();
@observable private _script: CompiledScript = CompileScript("return true") as CompiledScript;
@observable private Index: number = -1;
- @observable private _marqueeing: boolean = false;
+ @observable private _marqueeing: number[] | undefined;
@observable private _showWaiting = true;
@observable private _showCover = false;
@observable private _zoomed = 1;
@@ -379,29 +379,30 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
// if alt+left click, drag and annotate
this._downX = e.clientX;
this._downY = e.clientY;
- (e.target as any).tagName === "SPAN" && (this._styleRule = addStyleSheetRule(PDFViewer._annotationStyle, "pdfAnnotation", { "pointer-events": "none" }));
if ((this.Document._viewScale || 1) !== 1) return;
if ((e.button !== 0 || e.altKey) && this.active(true)) {
this._setPreviewCursor?.(e.clientX, e.clientY, true);
}
if (!e.altKey && e.button === 0 && this.active(true)) {
- // clear out old marquees and initialize menu for new selection
- PDFMenu.Instance.Status = "pdf";
- PDFMenu.Instance.fadeOut(true);
- this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove()));
- this._savedAnnotations.keys().forEach(k => this._savedAnnotations.setValue(k, []));
- if (e.target && (e.target as any).parentElement.className === "textLayer") {
- // start selecting text if mouse down on textLayer spans
+ if (e.target && (e.target as any).parentElement.className !== "textLayer") {
+ this._marqueeing = [e.clientX, e.clientY]; // if texLayer is hit, then we select text instead of using a marquee
+ } else {
+ // clear out old marquees and initialize menu for new selection
+ PDFMenu.Instance.Status = "pdf";
+ PDFMenu.Instance.fadeOut(true);
+ this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove()));
+ this._savedAnnotations.clear();
+ this._styleRule = addStyleSheetRule(PDFViewer._annotationStyle, "pdfAnnotation", { "pointer-events": "none" });
+ document.addEventListener("pointermove", this.onSelectMove);
+ document.addEventListener("pointerup", this.onSelectEnd);
}
- else this._marqueeing = true;
- document.addEventListener("pointermove", this.onSelectMove);
- document.addEventListener("pointerup", this.onSelectEnd);
- document.addEventListener("pointerup", this.removeStyle, true);
}
}
- removeStyle = () => {
- clearStyleSheetRules(PDFViewer._annotationStyle);
- document.removeEventListener("pointerup", this.removeStyle);
+
+ @action
+ finishMarquee = () => {
+ this._marqueeing = undefined;
+ this.props.select(false);
}
@action
@@ -410,6 +411,21 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
}
@action
+ onSelectEnd = (e: PointerEvent): void => {
+ clearStyleSheetRules(PDFViewer._annotationStyle);
+ this.props.select(false);
+ document.removeEventListener("pointermove", this.onSelectMove);
+ document.removeEventListener("pointerup", this.onSelectEnd);
+
+ const sel = window.getSelection();
+ if (sel?.type === "Range") {
+ const selRange = sel.getRangeAt(0);
+ this.createTextAnnotation(sel, selRange);
+ PDFMenu.Instance.jumpTo(e.clientX, e.clientY);
+ }
+ }
+
+ @action
createTextAnnotation = (sel: Selection, selRange: Range) => {
if (this._mainCont.current) {
const boundingRect = this._mainCont.current.getBoundingClientRect();
@@ -441,35 +457,17 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
}
}
- @action
- finishMarquee = () => { this._marqueeing = false; }
-
- @action
- onSelectEnd = (e: PointerEvent): void => {
- clearStyleSheetRules(PDFViewer._annotationStyle);
- this.props.select(false);
- this._savedAnnotations.clear();
- document.removeEventListener("pointermove", this.onSelectMove);
- document.removeEventListener("pointerup", this.onSelectEnd);
-
- const sel = window.getSelection();
- if (sel?.type === "Range") {
- const selRange = sel.getRangeAt(0);
- this.createTextAnnotation(sel, selRange);
- PDFMenu.Instance.jumpTo(e.clientX, e.clientY);
- }
- }
-
scrollXf = () => {
return this._mainCont.current ? this.props.ScreenToLocalTransform().translate(0, this.layoutDoc._scrollTop || 0) : this.props.ScreenToLocalTransform();
}
onClick = (e: React.MouseEvent) => {
if (this._setPreviewCursor && e.button === 0 &&
- Math.abs(e.clientX - this._downX) < 3 &&
- Math.abs(e.clientY - this._downY) < 3) {
+ Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
+ Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
this._setPreviewCursor(e.clientX, e.clientY, false);
}
+ e.stopPropagation();
}
setPreviewCursor = (func?: (x: number, y: number, drag: boolean) => void) => this._setPreviewCursor = func;
@@ -578,7 +576,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
{this.overlayInfo}
{this.standinViews}
{!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
- <MarqueeAnnotator rootDoc={this.rootDoc} addDocument={this.addDocument} finishMarquee={this.finishMarquee} getPageFromScroll={this.getPageFromScroll} savedAnnotations={this._savedAnnotations} annotationLayer={this._annotationLayer.current} clientX={this._downX} clientY={this._downY} mainCont={this._mainCont.current} />}
+ <MarqueeAnnotator rootDoc={this.rootDoc} down={this._marqueeing} addDocument={this.addDocument} finishMarquee={this.finishMarquee} getPageFromScroll={this.getPageFromScroll} savedAnnotations={this._savedAnnotations} annotationLayer={this._annotationLayer.current} mainCont={this._mainCont.current} />}
</div >;
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 22:01:29 +0000