aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/documents/Documents.ts1
-rw-r--r--src/client/util/CurrentUserUtils.ts2
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx5
-rw-r--r--src/client/views/nodes/WebBox.tsx82
4 files changed, 47 insertions, 43 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index d7af88b72..2d8a897a5 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -61,6 +61,7 @@ export interface DocumentOptions {
_autoHeight?: boolean;
_headerHeight?: number; // height of header of custom notes
_headerFontSize?: number; // font size of header of custom notes
+ _headerPointerEvents?: string; // types of events the header of a custom text document can consume
_panX?: number;
_panY?: number;
_width?: number;
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 5886aa13f..4f054269f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -405,7 +405,7 @@ export class CurrentUserUtils {
selection: { type: "text", anchor: 1, head: 1 },
storedMarks: []
};
- const headerTemplate = Docs.Create.RTFDocument(new RichTextField(JSON.stringify(json), ""), { title: "header", version: headerViewVersion, target: doc, _height: 70, _headerHeight: 12, _headerFontSize: 9, _autoHeight: true, system: true, cloneFieldFilter: new List<string>(["system"]) }, "header"); // text needs to be a space to allow templateText to be created
+ const headerTemplate = Docs.Create.RTFDocument(new RichTextField(JSON.stringify(json), ""), { title: "header", version: headerViewVersion, target: doc, _height: 70, _headerPointerEvents: "all", _headerHeight: 12, _headerFontSize: 9, _autoHeight: true, system: true, cloneFieldFilter: new List<string>(["system"]) }, "header"); // text needs to be a space to allow templateText to be created
headerTemplate[DataSym].layout =
"<div style={'height:100%'}>" +
" <FormattedTextBox {...props} fieldKey={'header'} dontSelectOnLoad={'true'} ignoreAutoHeight={'true'} pointerEvents='{this._headerPointerEvents||`none`}' fontSize='{this._headerFontSize}px' height='{this._headerHeight}px' background='{this._headerColor||this.target.mySharedDocs.userColor}' />" +
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 7a3257525..2285bcb8f 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -289,8 +289,11 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
dropAfter = where[axis] > (pos[axis] + pos1[axis]) / 2 ? 1 : 0;
}
});
+ const oldDocs = this.childDocs.length;
if (super.onInternalDrop(e, de)) {
- const newDocs = de.complete.docDragData.droppedDocuments;
+ const newDocs = this.childDocs.slice().filter((d: Doc, ind: number) => ind >= oldDocs);
+
+ //de.complete.docDragData.droppedDocuments;
const docs = this.childDocList;
DragManager.docsBeingDragged = [];
if (docs && newDocs.length) {
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 1e5e8133d..80e2d3ce2 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -43,21 +43,19 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
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 _startX: number = 0;
private _startY: number = 0;
- private _scrollTarget: any = undefined;
@observable private _marqueeX: number = 0;
@observable private _marqueeY: number = 0;
@observable private _marqueeWidth: number = 0;
@observable private _marqueeHeight: number = 0;
@observable private _marqueeing: boolean = false;
- public static LayoutString(fieldKey: string) { return FieldView.LayoutString(WebBox, fieldKey); }
- get _collapsed() { return StrCast(this.layoutDoc._chromeStatus) !== "enabled"; }
- set _collapsed(value) { this.layoutDoc._chromeStatus = !value ? "enabled" : "disabled"; }
@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;
@@ -65,10 +63,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
private _moveReactionDisposer?: IReactionDisposer;
private _longPressSecondsHack?: NodeJS.Timeout;
private _outerRef = React.createRef<HTMLDivElement>();
- private _iframeRef = React.createRef<HTMLIFrameElement>();
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"; }
+ get webpage() { return this._iframe?.contentDocument?.children[0]; }
constructor(props: any) {
super(props);
@@ -79,8 +80,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
}
iframeLoaded = action((e: any) => {
- const iframe = this._iframeRef.current;
- if (iframe && iframe.contentDocument) {
+ const iframe = this._iframe;
+ if (iframe?.contentDocument) {
iframe.setAttribute("enable-annotation", "true");
iframe.contentDocument.addEventListener("click", undoBatch(action(e => {
let href = "";
@@ -93,10 +94,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
}
})));
iframe.contentDocument.addEventListener('wheel', this.iframeWheel, false);
- iframe.contentDocument.addEventListener('scroll', this.iframeScroll, false);
- this.layoutDoc.scrollHeight = iframe.contentDocument.children?.[0].scrollHeight || 1000;
- iframe.contentDocument.children[0].scrollTop = NumCast(this.layoutDoc._scrollTop);
- iframe.contentDocument.children[0].scrollLeft = NumCast(this.layoutDoc._scrollLeft);
+ if (this.webpage) {
+ this.webpage.scrollTop = NumCast(this.layoutDoc._scrollTop);
+ this.webpage.scrollLeft = NumCast(this.layoutDoc._scrollLeft);
+ }
}
this._scrollReactionDisposer?.();
this._scrollReactionDisposer = reaction(() => ({ scrollY: this.layoutDoc._scrollY, scrollX: this.layoutDoc._scrollX }),
@@ -121,7 +122,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
scrollTop => {
const durationStr = StrCast(this.Document._viewTransition).match(/([0-9]*)ms/);
const duration = durationStr ? Number(durationStr[1]) : 1000;
- if (scrollTop !== undefined && this._forceSmoothScrollUpdate) {
+ if (scrollTop !== this._outerRef.current?.scrollTop && scrollTop !== undefined && this._forceSmoothScrollUpdate) {
this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollTop || 0), () => this._forceSmoothScrollUpdate = true);
} else this._forceSmoothScrollUpdate = true;
},
@@ -144,10 +145,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
setPreviewCursor = (func?: (x: number, y: number, drag: boolean) => void) => this._setPreviewCursor = func;
iframeWheel = (e: any) => {
if (this._forceSmoothScrollUpdate && e.target?.children) {
- this._scrollTarget && setTimeout(action(() => {
- this._scrollTarget.scrollLeft = 0;
- const scrollTop = this._scrollTarget.scrollTop;
- const scrollLeft = this._scrollTarget.scrollLeft;
+ this.webpage && setTimeout(action(() => {
+ this.webpage!.scrollLeft = 0;
+ const scrollTop = this.webpage!.scrollTop;
+ const scrollLeft = this.webpage!.scrollLeft;
this._outerRef.current!.scrollTop = scrollTop;
this._outerRef.current!.scrollLeft = scrollLeft;
if (this.layoutDoc._scrollTop !== scrollTop) {
@@ -161,9 +162,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
}));
}
}
- iframeScroll = (e: any) => {
- this._scrollTarget = e.target.children[0];
- }
async componentDidMount() {
const urlField = Cast(this.dataDoc[this.props.fieldKey], WebField);
runInAction(() => this._url = urlField?.url.toString() || "");
@@ -210,8 +208,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
this._scrollReactionDisposer?.();
document.removeEventListener("pointerup", this.onLongPressUp);
document.removeEventListener("pointermove", this.onLongPressMove);
- this._iframeRef.current?.contentDocument?.removeEventListener('wheel', this.iframeWheel);
- this._iframeRef.current?.contentDocument?.removeEventListener('scroll', this.iframeScroll);
+ this._iframe?.removeEventListener('wheel', this.iframeWheel);
}
onUrlDragover = (e: React.DragEvent) => {
@@ -330,9 +327,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
let pressedBound: ClientRect | undefined;
let selectedText: string = "";
let pressedImg: boolean = false;
- if (this._iframeRef.current) {
- const B = this._iframeRef.current.getBoundingClientRect();
- const iframeDoc = this._iframeRef.current.contentDocument;
+ if (this._iframe) {
+ const B = this._iframe.getBoundingClientRect();
+ const iframeDoc = this._iframe.contentDocument;
if (B && iframeDoc) {
// TODO: this only works when scale = 1 as it is currently only inteded for mobile upload
const element = iframeDoc.elementFromPoint(this._pressX - B.left, this._pressY - B.top);
@@ -443,11 +440,11 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
const url = this.layoutDoc.useCors ? Utils.CorsProxy(field.url.href) : field.url.href;
// view = <iframe className="webBox-iframe" src={url} onLoad={e => { e.currentTarget.before((e.currentTarget.contentDocument?.body || e.currentTarget.contentDocument)?.children[0]!); e.currentTarget.remove(); }}
- view = <iframe className="webBox-iframe" enable-annotation={"true"} ref={this._iframeRef} src={url} onLoad={this.iframeLoaded}
+ view = <iframe className="webBox-iframe" enable-annotation={"true"} ref={action((r: HTMLIFrameElement | null) => this._iframe = r)} src={url} onLoad={this.iframeLoaded}
// the 'allow-top-navigation' and 'allow-top-navigation-by-user-activation' attributes are left out to prevent iframes from redirecting the top-level Dash page
sandbox={"allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts"} />;
} else {
- view = <iframe className="webBox-iframe" enable-annotation={"true"} ref={this._iframeRef} src={"https://crossorigin.me/https://cs.brown.edu"} />;
+ view = <iframe className="webBox-iframe" enable-annotation={"true"} ref={action((r: HTMLIFrameElement | null) => this._iframe = r)} src={"https://crossorigin.me/https://cs.brown.edu"} />;
}
return view;
}
@@ -676,23 +673,26 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
width: `${Math.max(100, 100 / scaling)}% `,
pointerEvents: this.layoutDoc.isAnnotating && !this.layoutDoc._isBackground ? "all" : "none"
}}
- onWheel={e => e.stopPropagation()}
- onPointerDown={this.onMarqueeDown}
- onScroll={e => {
- const iframe = this._iframeRef?.current?.contentDocument;
- const outerFrame = this._outerRef.current;
- if (iframe && outerFrame) {
- if (iframe.children[0].scrollTop !== outerFrame.scrollTop) {
- iframe.children[0].scrollTop = outerFrame.scrollTop;
- }
- if (iframe.children[0].scrollLeft !== outerFrame.scrollLeft) {
- iframe.children[0].scrollLeft = outerFrame.scrollLeft;
- }
+ onWheel={e => {
+ const target = this._outerRef.current;
+ if (this._forceSmoothScrollUpdate && target && this.webpage) {
+ setTimeout(action(() => {
+ target.scrollLeft = 0;
+ const scrollTop = target.scrollTop;
+ const scrollLeft = target.scrollLeft;
+ this.webpage!.scrollTop = scrollTop;
+ this.webpage!.scrollLeft = scrollLeft;
+ if (this.layoutDoc._scrollTop !== scrollTop) this.layoutDoc._scrollTop = scrollTop;
+ if (this.layoutDoc._scrollLeft !== scrollLeft) this.layoutDoc._scrollLeft = scrollLeft;
+ }));
}
- //this._outerRef.current!.scrollTop !== this._scrollTop && (this._outerRef.current!.scrollTop = this._scrollTop)
- }}>
+ e.stopPropagation();
+ }}
+ onPointerDown={this.onMarqueeDown}
+ onScroll={e => e.stopPropagation()}
+ >
<div className={"webBox-innerContent"} style={{
- height: NumCast(this.layoutDoc.scrollHeight, 50),
+ height: NumCast(this.scrollHeight, 50),
pointerEvents: this.layoutDoc._isBackground ? "none" : undefined
}}>
<CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-04 00:43:12 +0000