From df23545cff9c612a91272c16fa819f8b53c310d0 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 3 Feb 2021 10:35:29 -0500 Subject: fixed webBox forward/backward and in lightbox. --- src/client/views/nodes/DocumentView.tsx | 14 +++++++--- src/client/views/nodes/WebBox.tsx | 45 +++++++++++++-------------------- 2 files changed, 28 insertions(+), 31 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 5ce8fcdcb..099433168 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -44,6 +44,13 @@ import React = require("react"); export type DocAfterFocusFunc = (notFocused: boolean) => boolean; export type DocFocusFunc = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc, dontCenter?: boolean, focused?: boolean) => void; export type StyleProviderFunc = (doc: Opt, props: Opt, property: string) => any; +export interface DocComponentView { + getAnchor: () => Doc; + back?: () => boolean; + forward?: () => boolean; + url?: () => string; + submitURL?: (url: string) => boolean; +} export interface DocumentViewSharedProps { renderDepth: number; Document: Doc; @@ -51,7 +58,7 @@ export interface DocumentViewSharedProps { fitContentsToDoc?: boolean; // used by freeformview to fit its contents to its panel. corresponds to _fitToBox property on a Document ContainingCollectionView: Opt; ContainingCollectionDoc: Opt; - setContentView?: (view: { getAnchor: () => Doc }) => any; + setContentView?: (view: DocComponentView) => any; CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView; PanelWidth: () => number; PanelHeight: () => number; @@ -122,6 +129,7 @@ export class DocumentViewInternal extends DocComponent; protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; private get topMost() { return this.props.renderDepth === 0; } @@ -701,10 +709,9 @@ export class DocumentViewInternal extends DocComponent this.ContentScale; onClickFunc = () => this.onClickHandler; makeLink = () => this.props.DocumentView.LinkBeingCreated; // pass the link placeholde to child views so they can react to make a specialized anchor. This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined. - setContentView = (view: { getAnchor: () => Doc }) => this._componentView = view; + setContentView = (view: { getAnchor: () => Doc, forward?: () => boolean, back?: () => boolean }) => this._componentView = view; @observable contentsActive: () => boolean = returnFalse; @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; - _componentView: { getAnchor: () => Doc } | undefined; @computed get contents() { TraceMobx(); return
{ get dataDoc() { return this.docView?.dataDoc || this.Document; } get finalLayoutKey() { return this.docView?.finalLayoutKey || "layout"; } get ContentDiv() { return this.docView?.ContentDiv; } + get ComponentView() { return this.docView?._componentView; } get allLinks() { return this.docView?.allLinks || []; } get LayoutFieldKey() { return this.docView?.LayoutFieldKey || "layout"; } diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 4b7f0bf77..438395ab0 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -25,7 +25,6 @@ import { ContextMenuProps } from "../ContextMenuItem"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; import { DocumentDecorations } from "../DocumentDecorations"; import { Annotation } from "../pdf/Annotation"; -import { AnchorMenu } from "../pdf/AnchorMenu"; import { FieldView, FieldViewProps } from './FieldView'; import "./WebBox.scss"; import React = require("react"); @@ -57,6 +56,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this._url; constructor(props: any) { super(props); @@ -76,8 +76,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this.rootDoc; + + 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() || ""); @@ -194,21 +199,6 @@ export class WebBox extends ViewBoxAnnotatableComponent { 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); @@ -218,7 +208,9 @@ export class WebBox extends ViewBoxAnnotatableComponent(DocListCast(this.dataDoc[this.annotationKey])); this.dataDoc[this.fieldKey] = new WebField(new URL(this._url = future.pop()!)); this.dataDoc[this.annotationKey] = new List(DocListCast(this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)])); + return true; } + return false; } @action @@ -231,7 +223,9 @@ export class WebBox extends ViewBoxAnnotatableComponent(DocListCast(this.dataDoc[this.annotationKey])); this.dataDoc[this.fieldKey] = new WebField(new URL(this._url = history.pop()!)); this.dataDoc[this.annotationKey] = new List(DocListCast(this.dataDoc[this.annotationKey + "-" + this.urlHash(this._url)])); + return true; } + return false; } urlHash(s: string) { @@ -239,10 +233,9 @@ export class WebBox extends ViewBoxAnnotatableComponent { - 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]); @@ -250,25 +243,21 @@ export class WebBox extends ViewBoxAnnotatableComponent([url]); - } else { history.push(url); } + this.layoutDoc._scrollTop = 0; future && (future.length = 0); this.dataDoc[this.annotationKey + "-" + this.urlHash(url)] = new List(annos); } - this.dataDoc[this.fieldKey] = new WebField(URLy); + this._url = newUrl; + this.dataDoc[this.fieldKey] = new WebField(new URL(newUrl)); this.dataDoc[this.annotationKey] = new List([]); } catch (e) { console.log("WebBox URL error:" + this._url); } } - onValueKeyDown = async (e: React.KeyboardEvent) => { - if (e.key === "Enter") this.submitURL(); - e.stopPropagation(); - } - editToggleBtn() { return {`${this.props.Document.isAnnotating ? "Exit" : "Enter"} annotation mode`}
}>