aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/WebBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/WebBox.tsx')
-rw-r--r--src/client/views/nodes/WebBox.tsx73
1 files changed, 29 insertions, 44 deletions
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 80e2d3ce2..8e824a447 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -193,7 +193,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
this.layoutDoc._height = this.layoutDoc[WidthSym]() / youtubeaspect;
}
} // else it's an HTMLfield
- } else if (field?.url) {
+ } else if (field?.url && !this.dataDoc.text) {
const result = await WebRequest.get(Utils.CorsProxy(field.url.href));
if (result) {
this.dataDoc.text = htmlToText.fromString(result.content);
@@ -442,7 +442,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
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"} />;
+ // 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"} />;
+ sandbox={"allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin"} />;
} else {
view = <iframe className="webBox-iframe" enable-annotation={"true"} ref={action((r: HTMLIFrameElement | null) => this._iframe = r)} src={"https://crossorigin.me/https://cs.brown.edu"} />;
}
@@ -451,17 +452,21 @@ 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={{ width: NumCast(this.layoutDoc[this.fieldKey + "-contentWidth"]) || (Number.isFinite(this.props.ContentScaling()) ? `${Math.max(100, 100 / this.props.ContentScaling())}% ` : "100%") }}
+ style={{
+ width: `${100 / scale}%`,
+ height: `${100 / scale}%`,
+ transform: `scale(${scale})`
+ }}
onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
{view}
</div>
{!frozen ? (null) :
- <div className="webBox-overlay" style={{ pointerEvents: this.layoutDoc._isBackground ? undefined : "all" }}
+ <div className="webBox-overlay" style={{ pointerEvents: this.props.layerProvider?.(this.layoutDoc) === false ? undefined : "all" }}
onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer}>
<div className="touch-iframe-overlay" onPointerDown={this.onLongPressDown} >
<div className="indicator" ref={this._iframeIndicatorRef}></div>
@@ -541,8 +546,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
if (annotationDoc) {
DragManager.StartPdfAnnoDrag([ele], new DragManager.PdfAnnoDragData(this.props.Document, annotationDoc, targetDoc), e.pageX, e.pageY, {
dragComplete: e => {
- if (!e.aborted && e.annoDragData && !e.annoDragData.linkDocument) {
- e.annoDragData.linkDocument = DocUtils.MakeLink({ doc: annotationDoc }, { doc: e.annoDragData.dropDocument }, "Annotation");
+ if (!e.aborted && e.annoDragData && !e.linkDocument) {
+ e.linkDocument = DocUtils.MakeLink({ doc: annotationDoc }, { doc: e.annoDragData.dropDocument }, "Annotation");
annotationDoc.isLinkButton = true;
annotationDoc.isPushpin = e.annoDragData?.dropDocument.annotationOn === this.props.Document;
}
@@ -645,33 +650,22 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
marqueeX = () => this._marqueeX;
marqueeY = () => this._marqueeY;
marqueeing = () => this._marqueeing;
- visibleHeight = () => {
- if (this._mainCont.current) {
- const boundingRect = this._mainCont.current.getBoundingClientRect();
- const scaling = (Doc.NativeWidth(this.Document) || 0) / boundingRect.width;
- return Math.min(boundingRect.height * scaling, this.props.PanelHeight() * scaling);
- }
- return this.props.PanelHeight();
- }
scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop));
render() {
- const scaling = Number.isFinite(this.props.ContentScaling()) ? this.props.ContentScaling() || 1 : 1;
+ const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false;
+ const scale = this.props.scaling?.() || 1;
return (<div className="webBox" ref={this._mainCont} >
<div className={`webBox-container`}
- style={{
- position: undefined,
- transform: `scale(${scaling})`,
- width: `${100 / scaling}% `,
- height: `${100 / scaling}% `,
- pointerEvents: this.layoutDoc._isBackground ? "none" : undefined
- }}
+ style={{ pointerEvents: inactiveLayer ? "none" : undefined }}
onContextMenu={this.specificContextMenu}>
<base target="_blank" />
{this.content}
<div className={"webBox-outerContent"} ref={this._outerRef}
style={{
- width: `${Math.max(100, 100 / scaling)}% `,
- pointerEvents: this.layoutDoc.isAnnotating && !this.layoutDoc._isBackground ? "all" : "none"
+ width: `${100 / scale}%`,
+ height: `${100 / scale}%`,
+ transform: `scale(${scale})`,
+ pointerEvents: this.layoutDoc.isAnnotating && !inactiveLayer ? "all" : "none"
}}
onWheel={e => {
const target = this._outerRef.current;
@@ -693,31 +687,22 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
>
<div className={"webBox-innerContent"} style={{
height: NumCast(this.scrollHeight, 50),
- pointerEvents: this.layoutDoc._isBackground ? "none" : undefined
+ pointerEvents: inactiveLayer ? "none" : undefined
}}>
<CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
- PanelHeight={this.props.PanelHeight}
- PanelWidth={this.props.PanelWidth}
- annotationsKey={this.annotationKey}
- VisibleHeight={this.visibleHeight}
- focus={this.props.focus}
- setPreviewCursor={this.setPreviewCursor}
- isSelected={this.props.isSelected}
+ renderDepth={this.props.renderDepth + 1}
+ CollectionView={undefined}
+ fieldKey={this.annotationKey}
isAnnotationOverlay={true}
- select={emptyFunction}
- active={this.active}
- ContentScaling={returnOne}
- whenActiveChanged={this.whenActiveChanged}
+ scaling={returnOne}
+ ScreenToLocalTransform={this.scrollXf}
removeDocument={this.removeDocument}
moveDocument={this.moveDocument}
addDocument={this.addDocument}
- CollectionView={undefined}
- ScreenToLocalTransform={this.scrollXf}
- renderDepth={this.props.renderDepth + 1}
- docFilters={this.props.docFilters}
- docRangeFilters={this.props.docRangeFilters}
- searchFilterDocs={this.props.searchFilterDocs}
- ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
+ setPreviewCursor={this.setPreviewCursor}
+ select={emptyFunction}
+ active={this.active}
+ whenActiveChanged={this.whenActiveChanged}>
</CollectionFreeFormView>
</div>
</div>