aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/pdf
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/pdf')
-rw-r--r--src/client/views/pdf/Annotation.tsx22
-rw-r--r--src/client/views/pdf/PDFMenu.tsx36
-rw-r--r--src/client/views/pdf/PDFViewer.scss4
-rw-r--r--src/client/views/pdf/PDFViewer.tsx165
4 files changed, 98 insertions, 129 deletions
diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx
index 936af9ab8..d8b340db6 100644
--- a/src/client/views/pdf/Annotation.tsx
+++ b/src/client/views/pdf/Annotation.tsx
@@ -11,10 +11,11 @@ import "./Annotation.scss";
interface IAnnotationProps {
anno: Doc;
- extensionDoc: Doc;
addDocTab: (document: Doc, dataDoc: Opt<Doc>, where: string) => boolean;
pinToPres: (document: Doc) => void;
focus: (doc: Doc) => void;
+ dataDoc: Doc;
+ fieldKey: string;
}
export default class Annotation extends React.Component<IAnnotationProps> {
@@ -29,10 +30,11 @@ interface IRegionAnnotationProps {
y: number;
width: number;
height: number;
- extensionDoc: Doc;
addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => boolean;
pinToPres: (document: Doc) => void;
document: Doc;
+ dataDoc: Doc;
+ fieldKey: string;
}
@observer
@@ -62,12 +64,12 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
}
deleteAnnotation = () => {
- let annotation = DocListCast(this.props.extensionDoc.annotations);
- let group = FieldValue(Cast(this.props.document.group, Doc));
+ const annotation = DocListCast(this.props.dataDoc[this.props.fieldKey + "-annotations"]);
+ const group = FieldValue(Cast(this.props.document.group, Doc));
if (group) {
if (annotation.indexOf(group) !== -1) {
- let newAnnotations = annotation.filter(a => a !== FieldValue(Cast(this.props.document.group, Doc)));
- this.props.extensionDoc.annotations = new List<Doc>(newAnnotations);
+ const newAnnotations = annotation.filter(a => a !== FieldValue(Cast(this.props.document.group, Doc)));
+ this.props.dataDoc[this.props.fieldKey + "-annotations"] = new List<Doc>(newAnnotations);
}
DocListCast(group.annotations).forEach(anno => anno.delete = true);
@@ -77,7 +79,7 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
}
pinToPres = () => {
- let group = FieldValue(Cast(this.props.document.group, Doc));
+ const group = FieldValue(Cast(this.props.document.group, Doc));
group && this.props.pinToPres(group);
}
@@ -93,7 +95,7 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
e.stopPropagation();
}
else if (e.button === 0) {
- let annoGroup = await Cast(this.props.document.group, Doc);
+ const annoGroup = await Cast(this.props.document.group, Doc);
if (annoGroup) {
DocumentManager.Instance.FollowLink(undefined, annoGroup,
(doc: Doc, maxLocation: string) => this.props.addDocTab(doc, undefined, e.ctrlKey ? "inTab" : "onRight"),
@@ -105,9 +107,9 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
addTag = (key: string, value: string): boolean => {
- let group = FieldValue(Cast(this.props.document.group, Doc));
+ const group = FieldValue(Cast(this.props.document.group, Doc));
if (group) {
- let valNum = parseInt(value);
+ const valNum = parseInt(value);
group[key] = isNaN(valNum) ? value : valNum;
return true;
}
diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx
index c64741769..05c70b74a 100644
--- a/src/client/views/pdf/PDFMenu.tsx
+++ b/src/client/views/pdf/PDFMenu.tsx
@@ -12,19 +12,17 @@ export default class PDFMenu extends AntimodeMenu {
static Instance: PDFMenu;
private _commentCont = React.createRef<HTMLButtonElement>();
- private _snippetButton: React.RefObject<HTMLButtonElement> = React.createRef();
@observable private _keyValue: string = "";
@observable private _valueValue: string = "";
@observable private _added: boolean = false;
@observable public Highlighting: boolean = false;
- @observable public Status: "pdf" | "annotation" | "snippet" | "" = "";
+ @observable public Status: "pdf" | "annotation" | "" = "";
public StartDrag: (e: PointerEvent, ele: HTMLElement) => void = unimplementedFunction;
public Highlight: (color: string) => Opt<Doc> = (color: string) => undefined;
public Delete: () => void = unimplementedFunction;
- public Snippet: (marquee: { left: number, top: number, width: number, height: number }) => void = unimplementedFunction;
public AddTag: (key: string, value: string) => boolean = returnFalse;
public PinToPres: () => void = unimplementedFunction;
public Marquee: { left: number; top: number; width: number; height: number; } | undefined;
@@ -80,34 +78,6 @@ export default class PDFMenu extends AntimodeMenu {
this.Delete();
}
- snippetStart = (e: React.PointerEvent) => {
- document.removeEventListener("pointermove", this.snippetDrag);
- document.addEventListener("pointermove", this.snippetDrag);
- document.removeEventListener("pointerup", this.snippetEnd);
- document.addEventListener("pointerup", this.snippetEnd);
-
- e.stopPropagation();
- e.preventDefault();
- }
-
- snippetDrag = (e: PointerEvent) => {
- e.stopPropagation();
- e.preventDefault();
- if (!this._dragging) {
- this._dragging = true;
-
- this.Marquee && this.Snippet(this.Marquee);
- }
- }
-
- snippetEnd = (e: PointerEvent) => {
- this._dragging = false;
- document.removeEventListener("pointermove", this.snippetDrag);
- document.removeEventListener("pointerup", this.snippetEnd);
- e.stopPropagation();
- e.preventDefault();
- }
-
@action
keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
this._keyValue = e.currentTarget.value;
@@ -128,14 +98,12 @@ export default class PDFMenu extends AntimodeMenu {
}
render() {
- let buttons = this.Status === "pdf" || this.Status === "snippet" ?
+ const buttons = this.Status === "pdf" ?
[
<button key="1" className="antimodeMenu-button" title="Click to Highlight" onClick={this.highlightClicked} style={this.Highlighting ? { backgroundColor: "#121212" } : {}}>
<FontAwesomeIcon icon="highlighter" size="lg" style={{ transition: "transform 0.1s", transform: this.Highlighting ? "" : "rotate(-45deg)" }} /></button>,
<button key="2" className="antimodeMenu-button" title="Drag to Annotate" ref={this._commentCont} onPointerDown={this.pointerDown}>
<FontAwesomeIcon icon="comment-alt" size="lg" /></button>,
- <button key="3" className="antimodeMenu-button" title="Drag to Snippetize Selection" style={{ display: this.Status === "snippet" ? "" : "none" }} onPointerDown={this.snippetStart} ref={this._snippetButton}>
- <FontAwesomeIcon icon="cut" size="lg" /></button>,
<button key="4" className="antimodeMenu-button" title="Pin Menu" onClick={this.togglePin} style={this.Pinned ? { backgroundColor: "#121212" } : {}}>
<FontAwesomeIcon icon="thumbtack" size="lg" style={{ transition: "transform 0.1s", transform: this.Pinned ? "rotate(45deg)" : "" }} /> </button>
] : [
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index ac018aa0e..4f81c6f70 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -1,5 +1,5 @@
-.pdfViewer-viewer, .pdfViewer-viewer-zoomed {
+.pdfViewer, .pdfViewer-zoomed {
pointer-events: all;
width: 100%;
height: 100%;
@@ -91,7 +91,7 @@
z-index: 10;
}
}
-.pdfViewer-viewer-zoomed {
+.pdfViewer-zoomed {
overflow-x: scroll;
}
\ No newline at end of file
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index f1c500391..a7c1990e9 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -30,6 +30,7 @@ import { DocumentDecorations } from "../DocumentDecorations";
import { InkingControl } from "../InkingControl";
import { InkTool } from "../../../new_fields/InkField";
import { TraceMobx } from "../../../new_fields/util";
+import { PdfField } from "../../../new_fields/URLField";
const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer");
const pdfjsLib = require("pdfjs-dist");
@@ -39,7 +40,7 @@ export const pageSchema = createSchema({
rotation: "number",
scrollY: "number",
scrollHeight: "number",
- search_string: "string"
+ serachMatch: "boolean"
});
pdfjsLib.GlobalWorkerOptions.workerSrc = `/assets/pdf.worker.js`;
@@ -112,8 +113,8 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
private _coverPath: any;
@computed get allAnnotations() {
- return this.extensionDoc ? DocListCast(this.extensionDoc.annotations).filter(
- anno => this._script.run({ this: anno }, console.log, true).result) : [];
+ return DocListCast(this.dataDoc[this.props.fieldKey + "-annotations"]).filter(
+ anno => this._script.run({ this: anno }, console.log, true).result);
}
@computed get nonDocAnnotations() {
@@ -125,13 +126,16 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
!this.props.Document.lockedTransform && (this.props.Document.lockedTransform = true);
// change the address to be the file address of the PNG version of each page
// file address of the pdf
- this._coverPath = JSON.parse(await rp.get(Utils.prepend(`/thumbnail${this.props.url.substring("files/".length, this.props.url.length - ".pdf".length)}-${(this.Document.curPage || 1)}.PNG`)));
+ const { url: { href } } = Cast(this.props.Document[this.props.fieldKey], PdfField)!;
+ this._coverPath = href.startsWith(window.location.origin) ?
+ JSON.parse(await rp.get(Utils.prepend(`/thumbnail${this.props.url.substring("files/pdfs/".length, this.props.url.length - ".pdf".length)}-${(this.Document.curPage || 1)}.png`))) :
+ { width: 100, height: 100, path: "" };
runInAction(() => this._showWaiting = this._showCover = true);
this.props.startupLive && this.setupPdfJsViewer();
- this._searchReactionDisposer = reaction(() => this.Document.search_string, searchString => {
- if (searchString) {
- this.search(searchString, true);
- this._lastSearch = searchString;
+ this._searchReactionDisposer = reaction(() => this.Document.searchMatch, search => {
+ if (search) {
+ this.search(Doc.SearchQuery(), true);
+ this._lastSearch = Doc.SearchQuery();
}
else {
setTimeout(() => this._lastSearch === "mxytzlaf" && this.search("mxytzlaf", true), 200); // bcz: how do we clear search highlights?
@@ -168,7 +172,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
copy = (e: ClipboardEvent) => {
if (this.props.active(true) && e.clipboardData) {
- let annoDoc = this.makeAnnotationDocument("rgba(3,144,152,0.3)"); // copied text markup color (blueish)
+ const annoDoc = this.makeAnnotationDocument("rgba(3,144,152,0.3)"); // copied text markup color (blueish)
if (annoDoc) {
e.clipboardData.setData("text/plain", this._selectionText);
e.clipboardData.setData("dash/pdfOrigin", this.props.Document[Id]);
@@ -204,14 +208,14 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
await this.initialLoad();
this._annotationReactionDisposer = reaction(
- () => this.extensionDoc && DocListCast(this.extensionDoc.annotations),
- annotations => annotations && annotations.length && (this._annotations = annotations),
+ () => DocListCast(this.dataDoc[this.props.fieldKey + "-annotations"]),
+ annotations => annotations?.length && (this._annotations = annotations),
{ fireImmediately: true });
this._filterReactionDisposer = reaction(
() => ({ scriptField: Cast(this.Document.filterScript, ScriptField), annos: this._annotations.slice() }),
action(({ scriptField, annos }: { scriptField: FieldResult<ScriptField>, annos: Doc[] }) => {
- let oldScript = this._script.originalScript;
+ const oldScript = this._script.originalScript;
this._script = scriptField && scriptField.script.compiled ? scriptField.script : CompileScript("return true") as CompiledScript;
if (this._script.originalScript !== oldScript) {
this.Index = -1;
@@ -239,8 +243,8 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
this.gotoPage(this.Document.curPage || 1);
}));
document.addEventListener("pagerendered", action(() => this._showCover = this._showWaiting = false));
- var pdfLinkService = new PDFJSViewer.PDFLinkService();
- let pdfFindController = new PDFJSViewer.PDFFindController({ linkService: pdfLinkService });
+ const pdfLinkService = new PDFJSViewer.PDFLinkService();
+ const pdfFindController = new PDFJSViewer.PDFFindController({ linkService: pdfLinkService });
this._pdfViewer = new PDFJSViewer.PDFViewer({
container: this._mainCont.current,
viewer: this._viewer.current,
@@ -259,16 +263,16 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
if (this._savedAnnotations.size() === 0) return undefined;
let mainAnnoDoc = Docs.Create.InstanceFromProto(new Doc(), "", {});
let mainAnnoDocProto = Doc.GetProto(mainAnnoDoc);
- let annoDocs: Doc[] = [];
+ const annoDocs: Doc[] = [];
let maxX = -Number.MAX_VALUE;
let minY = Number.MAX_VALUE;
if ((this._savedAnnotations.values()[0][0] as any).marqueeing) {
- let anno = this._savedAnnotations.values()[0][0];
- let annoDoc = Docs.Create.FreeformDocument([], { backgroundColor: color, title: "Annotation on " + this.Document.title });
+ const anno = this._savedAnnotations.values()[0][0];
+ const annoDoc = Docs.Create.FreeformDocument([], { backgroundColor: color, title: "Annotation on " + this.Document.title });
if (anno.style.left) annoDoc.x = parseInt(anno.style.left);
if (anno.style.top) annoDoc.y = parseInt(anno.style.top);
- if (anno.style.height) annoDoc.height = parseInt(anno.style.height);
- if (anno.style.width) annoDoc.width = parseInt(anno.style.width);
+ if (anno.style.height) annoDoc._height = parseInt(anno.style.height);
+ if (anno.style.width) annoDoc._width = parseInt(anno.style.width);
annoDoc.group = mainAnnoDoc;
annoDoc.isButton = true;
annoDocs.push(annoDoc);
@@ -279,11 +283,11 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
mainAnnoDocProto.y = annoDoc.y;
} else {
this._savedAnnotations.forEach((key: number, value: HTMLDivElement[]) => value.map(anno => {
- let annoDoc = new Doc();
+ const annoDoc = new Doc();
if (anno.style.left) annoDoc.x = parseInt(anno.style.left);
if (anno.style.top) annoDoc.y = parseInt(anno.style.top);
- if (anno.style.height) annoDoc.height = parseInt(anno.style.height);
- if (anno.style.width) annoDoc.width = parseInt(anno.style.width);
+ if (anno.style.height) annoDoc._height = parseInt(anno.style.height);
+ if (anno.style.width) annoDoc._width = parseInt(anno.style.width);
annoDoc.group = mainAnnoDoc;
annoDoc.backgroundColor = color;
annoDocs.push(annoDoc);
@@ -323,7 +327,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
@action
scrollToAnnotation = (scrollToAnnotation: Doc) => {
if (scrollToAnnotation) {
- let offset = this.visibleHeight() / 2 * 96 / 72;
+ const offset = this.visibleHeight() / 2 * 96 / 72;
this._mainCont.current && smoothScroll(500, this._mainCont.current, NumCast(scrollToAnnotation.y) - offset);
Doc.linkFollowHighlight(scrollToAnnotation);
}
@@ -355,7 +359,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
this._annotationLayer.current.append(div);
div.style.backgroundColor = "yellow";
div.style.opacity = "0.5";
- let savedPage = this._savedAnnotations.getValue(page);
+ const savedPage = this._savedAnnotations.getValue(page);
if (savedPage) {
savedPage.push(div);
this._savedAnnotations.setValue(page, savedPage);
@@ -381,7 +385,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
});
}
else if (this._mainCont.current) {
- let executeFind = () => {
+ const executeFind = () => {
this._pdfViewer.findController.executeCommand('find', {
caseSensitive: false,
findPrevious: !fwd,
@@ -397,7 +401,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
@action
onPointerDown = (e: React.PointerEvent): void => {
- let hit = document.elementFromPoint(e.clientX, e.clientY);
+ const hit = document.elementFromPoint(e.clientX, e.clientY);
if (hit && hit.localName === "span" && this.props.isSelected(true)) { // drag selecting text stops propagation
e.button === 0 && e.stopPropagation();
}
@@ -408,13 +412,13 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
if ((this.Document.scale || 1) !== 1) return;
if ((e.button !== 0 || e.altKey) && this.active(true)) {
this._setPreviewCursor && this._setPreviewCursor(e.clientX, e.clientY, true);
+ //e.stopPropagation();
}
this._marqueeing = false;
if (!e.altKey && e.button === 0 && this.active(true)) {
// clear out old marquees and initialize menu for new selection
PDFMenu.Instance.StartDrag = this.startDrag;
PDFMenu.Instance.Highlight = this.highlight;
- PDFMenu.Instance.Snippet = this.createSnippet;
PDFMenu.Instance.Status = "pdf";
PDFMenu.Instance.fadeOut(true);
this._savedAnnotations.values().forEach(v => v.forEach(a => a.remove()));
@@ -424,7 +428,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
}
else if (this._mainCont.current) {
// set marquee x and y positions to the spatially transformed position
- let boundingRect = this._mainCont.current.getBoundingClientRect();
+ const boundingRect = this._mainCont.current.getBoundingClientRect();
this._startX = this._marqueeX = (e.clientX - boundingRect.left) * (this._mainCont.current.offsetWidth / boundingRect.width);
this._startY = this._marqueeY = (e.clientY - boundingRect.top) * (this._mainCont.current.offsetHeight / boundingRect.height) + this._mainCont.current.scrollTop;
this._marqueeHeight = this._marqueeWidth = 0;
@@ -441,7 +445,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
onSelectMove = (e: PointerEvent): void => {
if (this._marqueeing && this._mainCont.current) {
// transform positions and find the width and height to set the marquee to
- let boundingRect = this._mainCont.current.getBoundingClientRect();
+ const boundingRect = this._mainCont.current.getBoundingClientRect();
this._marqueeWidth = ((e.clientX - boundingRect.left) * (this._mainCont.current.offsetWidth / boundingRect.width)) - this._startX;
this._marqueeHeight = ((e.clientY - boundingRect.top) * (this._mainCont.current.offsetHeight / boundingRect.height)) - this._startY + this._mainCont.current.scrollTop;
this._marqueeX = Math.min(this._startX, this._startX + this._marqueeWidth);
@@ -459,16 +463,16 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
@action
createTextAnnotation = (sel: Selection, selRange: Range) => {
if (this._mainCont.current) {
- let boundingRect = this._mainCont.current.getBoundingClientRect();
- let clientRects = selRange.getClientRects();
+ const boundingRect = this._mainCont.current.getBoundingClientRect();
+ const clientRects = selRange.getClientRects();
for (let i = 0; i < clientRects.length; i++) {
- let rect = clientRects.item(i);
+ const rect = clientRects.item(i);
if (rect) {
- let scaleY = this._mainCont.current.offsetHeight / boundingRect.height;
- let scaleX = this._mainCont.current.offsetWidth / boundingRect.width;
+ const scaleY = this._mainCont.current.offsetHeight / boundingRect.height;
+ const scaleX = this._mainCont.current.offsetWidth / boundingRect.width;
if (rect.width !== this._mainCont.current.clientWidth &&
(i === 0 || !intersectRect(clientRects[i], clientRects[i - 1]))) {
- let annoBox = document.createElement("div");
+ const annoBox = document.createElement("div");
annoBox.className = "pdfViewer-annotationBox";
// transforms the positions from screen onto the pdf div
annoBox.style.top = ((rect.top - boundingRect.top) * scaleY / this._zoomed + this._mainCont.current.scrollTop).toString();
@@ -496,10 +500,10 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
this._savedAnnotations.clear();
if (this._marqueeing) {
if (this._marqueeWidth > 10 || this._marqueeHeight > 10) {
- let marquees = this._mainCont.current!.getElementsByClassName("pdfViewer-dragAnnotationBox");
+ const marquees = this._mainCont.current!.getElementsByClassName("pdfViewer-dragAnnotationBox");
if (marquees && marquees.length) { // copy the marquee and convert it to a permanent annotation.
- let style = (marquees[0] as HTMLDivElement).style;
- let copy = document.createElement("div");
+ const style = (marquees[0] as HTMLDivElement).style;
+ const copy = document.createElement("div");
copy.style.left = style.left;
copy.style.top = style.top;
copy.style.width = style.width;
@@ -512,7 +516,6 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
}
if (!e.ctrlKey) {
- PDFMenu.Instance.Status = "snippet";
PDFMenu.Instance.Marquee = { left: this._marqueeX, top: this._marqueeY, width: this._marqueeWidth, height: this._marqueeHeight };
}
PDFMenu.Instance.jumpTo(e.clientX, e.clientY);
@@ -520,9 +523,9 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
this._marqueeing = false;
}
else {
- let sel = window.getSelection();
+ const sel = window.getSelection();
if (sel && sel.type === "Range") {
- let selRange = sel.getRangeAt(0);
+ const selRange = sel.getRangeAt(0);
this.createTextAnnotation(sel, selRange);
PDFMenu.Instance.jumpTo(e.clientX, e.clientY);
}
@@ -542,7 +545,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
@action
highlight = (color: string) => {
// creates annotation documents for current highlights
- let annotationDoc = this.makeAnnotationDocument(color);
+ const annotationDoc = this.makeAnnotationDocument(color);
annotationDoc && this.props.addDocument && this.props.addDocument(annotationDoc);
return annotationDoc;
}
@@ -555,31 +558,26 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
startDrag = (e: PointerEvent, ele: HTMLElement): void => {
e.preventDefault();
e.stopPropagation();
- let targetDoc = Docs.Create.TextDocument({ width: 200, height: 200, title: "Note linked to " + this.props.Document.title });
+ const targetDoc = Docs.Create.TextDocument("", { _width: 200, _height: 200, title: "Note linked to " + this.props.Document.title });
const annotationDoc = this.highlight("rgba(146, 245, 95, 0.467)"); // yellowish highlight color when dragging out a text selection
if (annotationDoc) {
- let dragData = new DragManager.AnnotationDragData(this.props.Document, annotationDoc, targetDoc);
- DragManager.StartAnnotationDrag([ele], dragData, e.pageX, e.pageY, {
- handlers: {
- dragComplete: () => !(dragData as any).linkedToDoc &&
- DocUtils.MakeLink({ doc: annotationDoc }, { doc: dragData.dropDocument, ctx: dragData.targetContext }, `Annotation from ${this.Document.title}`, "link from PDF")
-
- },
- hideSource: false
+ DragManager.StartPdfAnnoDrag([ele], new DragManager.PdfAnnoDragData(this.props.Document, annotationDoc, targetDoc), e.pageX, e.pageY, {
+ dragComplete: e => !e.aborted && e.annoDragData && !e.annoDragData.linkedToDoc &&
+ DocUtils.MakeLink({ doc: annotationDoc }, { doc: e.annoDragData.dropDocument, ctx: e.annoDragData.targetContext }, `Annotation from ${this.Document.title}`, "link from PDF")
});
}
}
createSnippet = (marquee: { left: number, top: number, width: number, height: number }): void => {
- let view = Doc.MakeAlias(this.props.Document);
- let data = Doc.MakeDelegate(Doc.GetProto(this.props.Document));
+ const view = Doc.MakeAlias(this.props.Document);
+ const data = Doc.MakeDelegate(Doc.GetProto(this.props.Document));
data.title = StrCast(data.title) + "_snippet";
view.proto = data;
- view.nativeHeight = marquee.height;
- view.height = (this.Document[WidthSym]() / (this.Document.nativeWidth || 1)) * marquee.height;
- view.nativeWidth = this.Document.nativeWidth;
+ view._nativeHeight = marquee.height;
+ view._height = (this.Document[WidthSym]() / (this.Document._nativeWidth || 1)) * marquee.height;
+ view._nativeWidth = this.Document._nativeWidth;
view.startY = marquee.top;
- view.width = this.Document[WidthSym]();
+ view._width = this.Document[WidthSym]();
DragManager.StartDocumentDrag([], new DragManager.DocumentDragData([view]), 0, 0);
}
@@ -600,13 +598,14 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
getCoverImage = () => {
if (!this.props.Document[HeightSym]() || !this.props.Document.nativeHeight) {
setTimeout((() => {
- this.Document.height = this.Document[WidthSym]() * this._coverPath.height / this._coverPath.width;
- this.Document.nativeHeight = nativeWidth * this._coverPath.height / this._coverPath.width;
+ this.Document._height = this.Document[WidthSym]() * this._coverPath.height / this._coverPath.width;
+ this.Document._nativeHeight = (this.Document._nativeWidth || 0) * this._coverPath.height / this._coverPath.width;
}).bind(this), 0);
}
- let nativeWidth = (this.Document.nativeWidth || 0);
- let nativeHeight = (this.Document.nativeHeight || 0);
- return <img key={this._coverPath.path} src={this._coverPath.path} onError={action(() => this._coverPath.path = "http://www.cs.brown.edu/~bcz/face.gif")} onLoad={action(() => this._showWaiting = false)}
+ const nativeWidth = (this.Document._nativeWidth || 0);
+ const nativeHeight = (this.Document._nativeHeight || 0);
+ const resolved = Utils.prepend(this._coverPath.path);
+ return <img key={resolved} src={resolved} onError={action(() => this._coverPath.path = "http://www.cs.brown.edu/~bcz/face.gif")} onLoad={action(() => this._showWaiting = false)}
style={{ position: "absolute", display: "inline-block", top: 0, left: 0, width: `${nativeWidth}px`, height: `${nativeHeight}px` }} />;
}
@@ -614,7 +613,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
onZoomWheel = (e: React.WheelEvent) => {
e.stopPropagation();
if (e.ctrlKey) {
- let curScale = Number(this._pdfViewer.currentScaleValue);
+ const curScale = Number(this._pdfViewer.currentScaleValue);
this._pdfViewer.currentScaleValue = Math.max(1, Math.min(10, curScale - curScale * e.deltaY / 1000));
this._zoomed = Number(this._pdfViewer.currentScaleValue);
}
@@ -622,18 +621,19 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
@computed get annotationLayer() {
TraceMobx();
- return <div className="pdfViewer-annotationLayer" style={{ height: (this.Document.nativeHeight || 0), transform: `scale(${this._zoomed})` }} ref={this._annotationLayer}>
+ return <div className="pdfViewer-annotationLayer" style={{ height: NumCast(this.Document.nativeHeight), transform: `scale(${this._zoomed})` }} ref={this._annotationLayer}>
{this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map((anno, index) =>
- <Annotation {...this.props} focus={this.props.focus} extensionDoc={this.extensionDoc!} anno={anno} key={`${anno[Id]}-annotation`} />)}
+ <Annotation {...this.props} focus={this.props.focus} dataDoc={this.dataDoc!} fieldKey={this.props.fieldKey} anno={anno} key={`${anno[Id]}-annotation`} />)}
</div>;
}
overlayTransform = () => this.scrollXf().scale(1 / this._zoomed);
- panelWidth = () => (this.Document.scrollHeight || this.Document.nativeHeight || 0);
- panelHeight = () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : (this.Document.nativeWidth || 0);
+ panelWidth = () => (this.Document.scrollHeight || this.Document._nativeHeight || 0);
+ panelHeight = () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : (this.Document._nativeWidth || 0);
@computed get overlayLayer() {
return <div className={`pdfViewer-overlay${InkingControl.Instance.selectedTool !== InkTool.None ? "-inking" : ""}`} id="overlay" style={{ transform: `scale(${this._zoomed})` }}>
<CollectionFreeFormView {...this.props}
- annotationsKey={this.annotationsKey}
+ LibraryPath={this.props.ContainingCollectionView?.props.LibraryPath ?? []}
+ annotationsKey={this.annotationKey}
setPreviewCursor={this.setPreviewCursor}
PanelHeight={this.panelWidth}
PanelWidth={this.panelHeight}
@@ -650,7 +650,6 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
addDocument={this.addDocument}
CollectionView={undefined}
ScreenToLocalTransform={this.overlayTransform}
- ruleProvider={undefined}
renderDepth={this.props.renderDepth + 1}
ContainingCollectionDoc={this.props.ContainingCollectionView?.props.Document}
chromeCollapsed={true}>
@@ -660,6 +659,7 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
@computed get pdfViewerDiv() {
return <div className={"pdfViewer-text" + ((!DocumentDecorations.Instance.Interacting && (this.props.isSelected() || this.props.isChildActive())) ? "-selected" : "")} ref={this._viewer} />;
}
+ @computed get contentScaling() { return this.props.ContentScaling(); }
@computed get standinViews() {
return <>
{this._showCover ? this.getCoverImage() : (null)}
@@ -673,22 +673,21 @@ export class PDFViewer extends DocAnnotatableComponent<IViewerProps, PdfDocument
marqueeing = () => this._marqueeing;
visibleHeight = () => this.props.PanelHeight() / this.props.ContentScaling() * 72 / 96;
contentZoom = () => this._zoomed;
- @computed get contentScaling() { return this.props.ContentScaling(); }
render() {
TraceMobx();
- return !this.extensionDoc ? (null) :
- <div className={"pdfViewer-viewer" + (this._zoomed !== 1 ? "-zoomed" : "")} ref={this._mainCont}
- style={{
- width: !this.props.Document.fitWidth ? NumCast(this.props.Document.nativeWidth) : `${100 / this.contentScaling}%`,
- height: !this.props.Document.fitWidth ? NumCast(this.props.Document.nativeHeight) : `${100 / this.contentScaling}%`,
- transform: `scale(${this.contentScaling})`
- }} onScroll={this.onScroll} onWheel={this.onZoomWheel} onPointerDown={this.onPointerDown} onClick={this.onClick}>
- {this.pdfViewerDiv}
- {this.overlayLayer}
- {this.annotationLayer}
- {this.standinViews}
- <PdfViewerMarquee isMarqueeing={this.marqueeing} width={this.marqueeWidth} height={this.marqueeHeight} x={this.marqueeX} y={this.marqueeY} />
- </div >;
+ return <div className={"pdfViewer" + (this._zoomed !== 1 ? "-zoomed" : "")} ref={this._mainCont}
+ onScroll={this.onScroll} onWheel={this.onZoomWheel} onPointerDown={this.onPointerDown} onClick={this.onClick}
+ style={{
+ width: !this.props.Document._fitWidth ? NumCast(this.props.Document._nativeWidth) : `${100 / this.contentScaling}%`,
+ height: !this.props.Document._fitWidth ? NumCast(this.props.Document._nativeHeight) : `${100 / this.contentScaling}%`,
+ transform: `scale(${this.props.ContentScaling()})`
+ }} >
+ {this.pdfViewerDiv}
+ {this.overlayLayer}
+ {this.annotationLayer}
+ {this.standinViews}
+ <PdfViewerMarquee isMarqueeing={this.marqueeing} width={this.marqueeWidth} height={this.marqueeHeight} x={this.marqueeX} y={this.marqueeY} />
+ </div >;
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-18 08:00:24 +0000