aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/MainView.tsx4
-rw-r--r--src/client/views/MarqueeAnnotator.tsx34
-rw-r--r--src/client/views/nodes/WebBox.tsx12
3 files changed, 36 insertions, 14 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4444a3944..71bff86c4 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -193,8 +193,8 @@ export class MainView extends React.Component {
document.addEventListener("pointerdown", this.globalPointerDown);
document.addEventListener("click", (e: MouseEvent) => {
if (!e.cancelBubble) {
- const pathstr = (e as any)?.path.map((p: any) => p.classList?.toString()).join();
- if (pathstr.includes("libraryFlyout")) {
+ const pathstr = (e as any)?.path?.map((p: any) => p.classList?.toString()).join();
+ if (pathstr?.includes("libraryFlyout")) {
SelectionManager.DeselectAll();
}
}
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index d59ed7770..f15287788 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -1,6 +1,5 @@
-import { action, observable, runInAction, ObservableMap } from "mobx";
+import { action, observable, ObservableMap, runInAction } from "mobx";
import { observer } from "mobx-react";
-import { Dictionary } from "typescript-collections";
import { AclAddonly, AclAdmin, AclEdit, DataSym, Doc, Opt } from "../../fields/Doc";
import { Id } from "../../fields/FieldSymbols";
import { List } from "../../fields/List";
@@ -8,7 +7,6 @@ import { NumCast } from "../../fields/Types";
import { GetEffectiveAcl } from "../../fields/util";
import { Utils } from "../../Utils";
import { Docs } from "../documents/Documents";
-import { DocumentType } from "../documents/DocumentTypes";
import { CurrentUserUtils } from "../util/CurrentUserUtils";
import { DragManager } from "../util/DragManager";
import { undoBatch } from "../util/UndoManager";
@@ -22,8 +20,10 @@ const _global = (window /* browser */ || global /* node */) as any;
export interface MarqueeAnnotatorProps {
rootDoc: Doc;
down: number[];
+ iframe?: () => undefined | HTMLIFrameElement;
scrollTop: number;
scaling?: () => number;
+ iframeScaling?: () => number;
containerOffset?: () => number[];
mainCont: HTMLDivElement;
docView: DocumentView;
@@ -60,8 +60,10 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
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, true);
- document.addEventListener("pointerup", this.onSelectEnd, true);
+
+ const doc = (this.props.iframe?.()?.contentDocument ?? document);
+ doc.addEventListener("pointermove", this.onSelectMove);
+ doc.addEventListener("pointerup", this.onSelectEnd);
AnchorMenu.Instance.OnClick = (e: PointerEvent) => this.props.anchorMenuClick?.(this.highlight("rgba(173, 216, 230, 0.75)", true));
AnchorMenu.Instance.Highlight = this.highlight;
@@ -92,8 +94,9 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
});
}
componentWillUnmount() {
- document.removeEventListener("pointermove", this.onSelectMove, true);
- document.removeEventListener("pointerup", this.onSelectEnd, true);
+ const doc = (this.props.iframe?.()?.contentDocument ?? document);
+ doc.removeEventListener("pointermove", this.onSelectMove);
+ doc.removeEventListener("pointerup", this.onSelectEnd);
}
@undoBatch
@@ -169,9 +172,12 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
@action
onSelectMove = (e: PointerEvent) => {
// transform positions and find the width and height to set the marquee to
- const boundingRect = this.props.mainCont.getBoundingClientRect();
- this._width = ((e.clientX - boundingRect.left) * (this.props.mainCont.offsetWidth / boundingRect.width)) - this._startX;
- this._height = ((e.clientY - boundingRect.top) * (this.props.mainCont.offsetHeight / boundingRect.height)) - this._startY + this.props.mainCont.scrollTop;
+ const boundingRect = (this.props.iframe?.()?.contentDocument?.body || this.props.mainCont).getBoundingClientRect();
+ const mainRect = this.props.mainCont.getBoundingClientRect();
+ const cliX = e.clientX * (this.props.iframeScaling?.() || 1) - boundingRect.left;
+ const cliY = e.clientY * (this.props.iframeScaling?.() || 1) - boundingRect.top;
+ this._width = (cliX * (this.props.mainCont.offsetWidth / mainRect.width)) - this._startX;
+ this._height = (cliY * (this.props.mainCont.offsetHeight / mainRect.height)) - this._startY + this.props.mainCont.scrollTop;
this._left = Math.min(this._startX, this._startX + this._width);
this._top = Math.min(this._startY, this._startY + this._height);
this._width = Math.abs(this._width);
@@ -180,6 +186,10 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
}
onSelectEnd = (e: PointerEvent) => {
+ console.log("Scaling = " + this.props.iframeScaling?.() + " " + this.props.scaling?.())
+ const mainRect = this.props.mainCont.getBoundingClientRect();
+ const cliX = e.clientX * (this.props.iframeScaling?.() || 1) + (this.props.iframe ? mainRect.left : 0);
+ const cliY = e.clientY * (this.props.iframeScaling?.() || 1) + (this.props.iframe ? mainRect.top : 0);
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).
@@ -199,7 +209,7 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
MarqueeAnnotator.previewNewAnnotation(this.props.savedAnnotations, this.props.annotationLayer, copy, this.props.getPageFromScroll?.(this._top) || 0);
}
- AnchorMenu.Instance.jumpTo(e.clientX, e.clientY);
+ AnchorMenu.Instance.jumpTo(cliX, cliY);
if (AnchorMenu.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)", false); // yellowish highlight color for highlighted text (should match AnchorMenu's highlight color)
@@ -207,7 +217,7 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
this.props.finishMarquee();
} else {
runInAction(() => this._width = this._height = 0);
- this.props.finishMarquee(e.clientX, e.clientY);
+ this.props.finishMarquee(cliX, cliY);
}
}
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index a60a35b01..bfe8782ac 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -32,6 +32,7 @@ import { FieldView, FieldViewProps } from './FieldView';
import { LinkDocPreview } from "./LinkDocPreview";
import "./WebBox.scss";
import React = require("react");
+const _global = (window /* browser */ || global /* node */) as any;
const htmlToText = require("html-to-text");
type WebDocument = makeInterface<[typeof documentSchema]>;
@@ -53,6 +54,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
@observable private _marqueeing: number[] | undefined;
@observable private _url: string = "hello";
@observable private _isAnnotating = false;
+ @observable private _iframeClick: HTMLIFrameElement | undefined = undefined;
@observable private _iframe: HTMLIFrameElement | null = null;
@observable private _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
@observable private _scrollHeight = 1500;
@@ -200,6 +202,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
this._iframe?.contentDocument?.addEventListener("pointerup", this.iframeUp);
setTimeout(action(() => this._marqueeing = undefined), 100); // bcz: hack .. anchor menu is setup within MarqueeAnnotator so we need to at least create the marqueeAnnotator even though we aren't using it.
} else {
+ this._iframeClick = this._iframe ?? undefined;
this._isAnnotating = true;
this.props.select(false);
e.stopPropagation();
@@ -207,6 +210,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
}
}
+ isFirefox = () => {
+ return "InstallTrigger" in window; // navigator.userAgent.indexOf("Chrome") !== -1;
+ }
+ iframeClick = () => this._iframeClick;
+ iframeScaling = () => 1 / this.props.ScreenToLocalTransform().Scale;
+
@action
iframeLoaded = (e: any) => {
const iframe = this._iframe;
@@ -388,6 +397,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
@action finishMarquee = (x?: number, y?: number) => {
this._marqueeing = undefined;
this._isAnnotating = false;
+ this._iframeClick = undefined;
x !== undefined && y !== undefined && this._setPreviewCursor?.(x, y, false);
}
@@ -493,6 +503,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
</div>
{!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
<MarqueeAnnotator rootDoc={this.rootDoc}
+ iframe={this.isFirefox() ? this.iframeClick : undefined}
+ iframeScaling={this.isFirefox() ? this.iframeScaling : undefined}
anchorMenuClick={this._sidebarRef.current?.anchorMenuClick}
scrollTop={0}
down={this._marqueeing} scaling={returnOne}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 23:05:27 +0000