diff options
Diffstat (limited to 'src/client/views/nodes/WebBox.tsx')
| -rw-r--r-- | src/client/views/nodes/WebBox.tsx | 262 |
1 files changed, 110 insertions, 152 deletions
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 4b7f0bf77..ef0df25b6 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -24,12 +24,12 @@ import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; import { DocumentDecorations } from "../DocumentDecorations"; +import { MarqueeAnnotator } from "../MarqueeAnnotator"; import { Annotation } from "../pdf/Annotation"; -import { AnchorMenu } from "../pdf/AnchorMenu"; +import { DocAfterFocusFunc } from "./DocumentView"; import { FieldView, FieldViewProps } from './FieldView'; import "./WebBox.scss"; import React = require("react"); -import { MarqueeAnnotator } from "../MarqueeAnnotator"; const htmlToText = require("html-to-text"); type WebDocument = makeInterface<[typeof documentSchema]>; @@ -37,25 +37,23 @@ const WebDocument = makeInterface(documentSchema); @observer export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocument>(WebDocument) { - private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); public static LayoutString(fieldKey: string) { return FieldView.LayoutString(WebBox, fieldKey); } private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); - 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 _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef(); private _iframeIndicatorRef = React.createRef<HTMLDivElement>(); private _iframeDragRef = React.createRef<HTMLDivElement>(); + private _ignoreScroll = false; + private _initialScroll: Opt<number>; @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[]>(); - 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) { @@ -64,11 +62,17 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(this.dataDoc) || 850); Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(this.dataDoc) || this.Document[HeightSym]() / this.Document[WidthSym]() * 850); } + this._annotationKey = this._annotationKey + "-" + this.urlHash(this._url); } - iframeLoaded = action((e: any) => { + iframeLoaded = (e: any) => { const iframe = this._iframe; if (iframe?.contentDocument) { + if (this._initialScroll !== undefined && this._outerRef.current && this.webpage) { + this.webpage.scrollTop = this._initialScroll; + this._outerRef.current.scrollTop = this._initialScroll; + this._initialScroll = undefined; + } iframe.setAttribute("enable-annotation", "true"); iframe.contentDocument.addEventListener("click", undoBatch(action(e => { let href = ""; @@ -76,86 +80,60 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum href = (typeof (ele.href) === "string" ? ele.href : ele.href?.baseVal) || ele.parentElement?.href || href; } if (href) { - this._url = href.replace(Utils.prepend(""), Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.origin); - this.submitURL(); + this.submitURL(href.replace(Utils.prepend(""), Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.origin)); + if (this.webpage) { + this.webpage.scrollTop = NumCast(this.layoutDoc._scrollTop); + this.webpage.scrollLeft = 0; + } } }))); iframe.contentDocument.addEventListener('wheel', this.iframeWheel, false); - if (this.webpage) { - this.webpage.scrollTop = NumCast(this.layoutDoc._scrollTop); - this.webpage.scrollLeft = NumCast(this.layoutDoc._scrollLeft); - } } - 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/); - const duration = durationStr ? Number(durationStr[1]) : 1000; - if (scrollY !== undefined) { - this._forceSmoothScrollUpdate = true; - this.layoutDoc._scrollY = undefined; - setTimeout(() => this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollY || 0), () => this.layoutDoc._scrollTop = scrollY), delay); - } - if (scrollX !== undefined) { - this._forceSmoothScrollUpdate = true; - this.layoutDoc._scrollX = undefined; - setTimeout(() => this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollX || 0), () => this.layoutDoc._scrollLeft = scrollX), delay); - } - }, - { fireImmediately: true } - ); - 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; - 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; - }, - { fireImmediately: true } - ); - }); - _forceSmoothScrollUpdate = true; + } - updateScroll = (x: Opt<number>, y: Opt<number>) => { - if (y !== undefined) { - this._outerRef.current!.scrollTop = y; - this.layoutDoc._scrollY = undefined; - } - if (x !== undefined) { - this._outerRef.current!.scrollLeft = x; - this.layoutDoc.scrollX = undefined; + @action + onWheelScroll = (scrollTop: number) => { + if (this.webpage && this._outerRef.current) { + this.webpage.scrollLeft = 0; + this._outerRef.current.scrollTop = scrollTop; + this._outerRef.current.scrollLeft = 0; + this._ignoreScroll = true; + if (this.layoutDoc._scrollTop !== scrollTop) { + this.layoutDoc._scrollTop = scrollTop; + } + this._ignoreScroll = false; } } + iframeWheel = (e: any) => this.webpage && e.target?.children && this.onWheelScroll(this.webpage.scrollTop); + onWheel = (e: React.WheelEvent) => { + this._outerRef.current && this.onWheelScroll(this._outerRef.current.scrollTop); + e.stopPropagation(); + } - setPreviewCursor = (func?: (x: number, y: number, drag: boolean) => void) => this._setPreviewCursor = func; - iframeWheel = (e: any) => { - if (this._forceSmoothScrollUpdate && e.target?.children) { - 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) { - this._forceSmoothScrollUpdate = false; - this.layoutDoc._scrollTop = scrollTop; - } - if (this.layoutDoc._scrollLeft !== scrollLeft) { - this._forceSmoothScrollUpdate = false; - this.layoutDoc._scrollLeft = scrollLeft; - } - })); + getAnchor = () => this.rootDoc; + scrollFocus = (doc: Doc, smooth: boolean, afterFocus?: DocAfterFocusFunc) => { + if (doc !== this.rootDoc && this.webpage && this._outerRef.current) { + const scrollTo = Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.layoutDoc._scrollTop), this.props.PanelHeight() / (this.props.scaling?.() || 1)); + if (scrollTo !== undefined) { + this._initialScroll !== undefined && (this._initialScroll = scrollTo); + this._ignoreScroll = true; + this.goTo(scrollTo, smooth ? 500 : 0); + this.layoutDoc._scrollTop = scrollTo; + this._ignoreScroll = false; + return afterFocus?.(true); + } + } else { + this._initialScroll = NumCast(doc.y); } + afterFocus?.(false); } + async componentDidMount() { + this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link. + const urlField = Cast(this.dataDoc[this.props.fieldKey], WebField); runInAction(() => this._url = urlField?.url.toString() || ""); - this._disposers.scrollMove = reaction(() => this.layoutDoc.x || this.layoutDoc.y, - () => this.updateScroll(this.layoutDoc._scrollLeft, this.layoutDoc._scrollTop)); - this._disposers.selection = reaction(() => this.props.isSelected(), selected => { if (!selected) { @@ -185,6 +163,36 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum this.dataDoc.text = htmlToText.fromString(result.content); } } + + var quickScroll = true; + this._disposers.scrollReaction = reaction(() => NumCast(this.layoutDoc._scrollTop), + (scrollTop) => { + if (quickScroll) { + this._initialScroll = scrollTop; + } + else if (!this._ignoreScroll) { + const viewTrans = StrCast(this.Document._viewTransition); + const durationMiliStr = viewTrans.match(/([0-9]*)ms/); + const durationSecStr = viewTrans.match(/([0-9.]*)s/); + const duration = durationMiliStr ? Number(durationMiliStr[1]) : durationSecStr ? Number(durationSecStr[1]) * 1000 : 0; + this.goTo(scrollTop, duration); + } + }, + { fireImmediately: true } + ); + quickScroll = false; + } + + goTo = (scrollTop: number, duration: number) => { + if (this._outerRef.current && this.webpage) { + if (duration) { + smoothScroll(duration, this.webpage as any as HTMLElement, scrollTop); + smoothScroll(duration, this._outerRef.current, scrollTop); + } else { + this.webpage.scrollTop = scrollTop; + this._outerRef.current.scrollTop = scrollTop; + } + } } componentWillUnmount() { @@ -194,31 +202,17 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum this._iframe?.removeEventListener('wheel', this.iframeWheel); } - onUrlDragover = (e: React.DragEvent) => { e.preventDefault(); }; - - @undoBatch - @action - onUrlDrop = (e: React.DragEvent) => { - const { dataTransfer } = e; - const html = dataTransfer.getData("text/html"); - const uri = dataTransfer.getData("text/uri-list"); - const url = uri || html || this._url; - this._url = url.startsWith(window.location.origin) ? - url.replace(window.location.origin, this._url.match(/http[s]?:\/\/[^\/]*/)?.[0] || "") : url; - this.submitURL(); - e.stopPropagation(); - } - @action forward = () => { const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null); const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), null); if (future.length) { history.push(this._url); - this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey])); this.dataDoc[this.fieldKey] = new WebField(new URL(this._url = future.pop()!)); - this.dataDoc[this.annotationKey] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)])); + this._annotationKey = this.fieldKey + "-annotations-" + this.urlHash(this._url); + return true; } + return false; } @action @@ -228,10 +222,11 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum if (history.length) { if (future === undefined) this.dataDoc[this.fieldKey + "-future"] = new List<string>([this._url]); else future.push(this._url); - this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey])); this.dataDoc[this.fieldKey] = new WebField(new URL(this._url = history.pop()!)); - this.dataDoc[this.annotationKey] = new List<Doc>(DocListCast(this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)])); + this._annotationKey = this.fieldKey + "-annotations-" + this.urlHash(this._url); + return true; } + return false; } urlHash(s: string) { @@ -239,34 +234,28 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum } @action - submitURL = () => { - if (!this._url.startsWith("http")) this._url = "http://" + this._url; + submitURL = (newUrl: string) => { + if (!newUrl.startsWith("http")) newUrl = "http://" + newUrl; try { - const URLy = new URL(this._url); const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null); const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), null); - const annos = DocListCast(this.dataDoc[this.annotationKey]); const url = Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.toString(); if (url) { if (history === undefined) { this.dataDoc[this.fieldKey + "-history"] = new List<string>([url]); - } else { history.push(url); } + this.layoutDoc._scrollTop = 0; future && (future.length = 0); - this.dataDoc[this.annotationKey + "-" + this.urlHash(url)] = new List<Doc>(annos); } - this.dataDoc[this.fieldKey] = new WebField(URLy); - this.dataDoc[this.annotationKey] = new List<Doc>([]); + this._url = newUrl; + this._annotationKey = this.fieldKey + "-annotations-" + this.urlHash(this._url); + this.dataDoc[this.fieldKey] = new WebField(new URL(newUrl)); } catch (e) { console.log("WebBox URL error:" + this._url); } - } - - onValueKeyDown = async (e: React.KeyboardEvent) => { - if (e.key === "Enter") this.submitURL(); - e.stopPropagation(); + return true; } editToggleBtn() { @@ -280,15 +269,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum } _ignore = 0; - onPreWheel = (e: React.WheelEvent) => { this._ignore = e.timeStamp; }; - onPrePointer = (e: React.PointerEvent) => { this._ignore = e.timeStamp; }; - onPostPointer = (e: React.PointerEvent) => { - if (this._ignore !== e.timeStamp) e.stopPropagation(); - } - - onPostWheel = (e: React.WheelEvent) => { - if (this._ignore !== e.timeStamp) e.stopPropagation(); - } + onPreWheel = (e: React.WheelEvent) => this._ignore = e.timeStamp; + onPrePointer = (e: React.PointerEvent) => this._ignore = e.timeStamp; + onPostPointer = (e: React.PointerEvent) => this._ignore !== e.timeStamp && e.stopPropagation(); + onPostWheel = (e: React.WheelEvent) => this._ignore !== e.timeStamp && e.stopPropagation(); onLongPressDown = (e: React.PointerEvent) => { this._pressX = e.clientX; @@ -372,22 +356,14 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum } }, 1500); } - onLongPressMove = (e: PointerEvent) => { // this._pressX = e.clientX; // this._pressY = e.clientY; } - onLongPressUp = (e: PointerEvent) => { - if (this._longPressSecondsHack) { - clearTimeout(this._longPressSecondsHack); - } - if (this._iframeIndicatorRef.current) { - this._iframeIndicatorRef.current.classList.remove("active"); - } - if (this._iframeDragRef.current) { - while (this._iframeDragRef.current.firstChild) this._iframeDragRef.current.removeChild(this._iframeDragRef.current.firstChild); - } + this._longPressSecondsHack && clearTimeout(this._longPressSecondsHack); + this._iframeIndicatorRef.current?.classList.remove("active"); + while (this._iframeDragRef.current?.firstChild) this._iframeDragRef.current.removeChild(this._iframeDragRef.current.firstChild); } specificContextMenu = (e: React.MouseEvent): void => { @@ -396,11 +372,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum funcs.push({ description: (this.layoutDoc.useCors ? "Don't Use" : "Use") + " Cors", event: () => this.layoutDoc.useCors = !this.layoutDoc.useCors, icon: "snowflake" }); funcs.push({ description: (this.layoutDoc[this.fieldKey + "-contentWidth"] ? "Unfreeze" : "Freeze") + " Content Width", event: () => this.layoutDoc[this.fieldKey + "-contentWidth"] = this.layoutDoc[this.fieldKey + "-contentWidth"] ? undefined : Doc.NativeWidth(this.layoutDoc), icon: "snowflake" }); cm.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); - } - //const href = "https://brown365-my.sharepoint.com/personal/bcz_ad_brown_edu/_layouts/15/Doc.aspx?sourcedoc={31aa3178-4c21-4474-b367-877d0a7135e4}&action=embedview&wdStartOn=1"; - @computed get urlContent() { const field = this.dataDoc[this.props.fieldKey]; @@ -410,7 +383,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum } else if (field instanceof WebField) { 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={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"} />; @@ -423,10 +395,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum @computed get content() { - const view = this.urlContent; const frozen = !this.props.isSelected() || DocumentDecorations.Instance?.Interacting; const scale = this.props.scaling?.() || 1; - return (<> <div className={"webBox-cont" + (this.props.isSelected() && Doc.GetSelectedTool() === InkTool.None && !DocumentDecorations.Instance?.Interacting ? "-interactive" : "")} style={{ @@ -435,7 +405,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum transform: `scale(${scale})` }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}> - {view} + {this.urlContent} </div> {!frozen ? (null) : <div className="webBox-overlay" style={{ pointerEvents: this.props.layerProvider?.(this.layoutDoc) === false ? undefined : "all" }} @@ -450,7 +420,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum @computed get allAnnotations() { return DocListCast(this.dataDoc[this.props.fieldKey + "-annotations"]); } @computed get nonDocAnnotations() { return this.allAnnotations.filter(a => a.annotations); } - @computed get annotationLayer() { TraceMobx(); return <div className="webBox-annotationLayer" style={{ height: Doc.NativeHeight(this.Document) || undefined }} ref={this._annotationLayer}> @@ -471,7 +440,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum this.props.select(true); } - scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); + panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0); + panelHeight = () => this.props.PanelHeight() / (this.props.scaling?.() || 1); // () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : Doc.NativeWidth(this.Document); + scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._scrollTop)); render() { const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false; const scale = this.props.scaling?.() || 1; @@ -486,21 +457,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum width: `${100 / scale}%`, height: `${100 / scale}%`, transform: `scale(${scale})`, pointerEvents: this.layoutDoc.isAnnotating && !inactiveLayer ? "all" : "none" }} - 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; - })); - } - e.stopPropagation(); - }} + onWheel={this.onWheel} onPointerDown={this.onMarqueeDown} onScroll={e => e.stopPropagation()} > @@ -514,11 +471,12 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum fieldKey={this.annotationKey} isAnnotationOverlay={true} scaling={returnOne} + PanelWidth={this.panelWidth} + PanelHeight={this.panelHeight} ScreenToLocalTransform={this.scrollXf} removeDocument={this.removeDocument} moveDocument={this.moveDocument} addDocument={this.addDocument} - setPreviewCursor={this.setPreviewCursor} select={emptyFunction} active={this.active} whenActiveChanged={this.whenActiveChanged}> @@ -527,7 +485,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum </div> {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} />} + <MarqueeAnnotator rootDoc={this.rootDoc} scrollTop={NumCast(this.rootDoc._scrollTop)} 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>); |