From 729114c0867e3cc8d8e0668bae451976b387cb34 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 28 Apr 2024 13:08:09 -0400
Subject: simplified explore mode implementation

---
 src/client/views/nodes/DocumentView.tsx            | 35 ++++++++++++++--------
 src/client/views/nodes/FieldView.tsx               |  1 -
 src/client/views/nodes/ImageBox.tsx                | 18 +++++------
 .../views/nodes/MapboxMapBox/MapboxContainer.tsx   |  1 -
 src/client/views/nodes/VideoBox.tsx                |  4 +++
 .../views/nodes/formattedText/FormattedTextBox.tsx |  2 +-
 6 files changed, 36 insertions(+), 25 deletions(-)

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 5962cd09f..555b4ba92 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -165,7 +165,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
     @computed get borderPath()         { return this.style(this.Document, StyleProp.BorderPath); } // prettier-ignore
 
     @computed get onClickHandler() {
-        return this._props.onClickScript?.() ?? this._props.onBrowseClickScript?.() ?? ScriptCast(this.Document.onClick, ScriptCast(this.layoutDoc.onClick));
+        return this._props.onClickScript?.() ?? ScriptCast(this.Document.onClick, ScriptCast(this.layoutDoc.onClick));
     }
     @computed get onDoubleClickHandler() {
         return this._props.onDoubleClickScript?.() ?? ScriptCast(this.layoutDoc.onDoubleClick, ScriptCast(this.Document.onDoubleClick));
@@ -189,13 +189,13 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
     @computed get _rootSelected() {
         return this._props.isSelected() || BoolCast(this._props.TemplateDataDocument && this._props.rootSelected?.());
     }
-    /// disable pointer events on content when there's an enabled onClick script (but not the browse script) and the contents aren't forced active, or if contents are marked inactive
+    /// disable pointer events on content when there's an enabled onClick script (and not in explore mode) and the contents aren't forced active, or if contents are marked inactive
     @computed get _contentPointerEvents() {
         TraceMobx();
         return this._props.contentPointerEvents ??
             ((!this.disableClickScriptFunc && //
                 this.onClickHandler &&
-                !this._props.onBrowseClickScript?.() &&
+                !SnappingManager.ExploreMode &&
                 !this.layoutDoc.layout_isSvg &&
                 this.isContentActive() !== true) ||
                 this.isContentActive() === false)
@@ -310,6 +310,20 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
         if (!StrCast(this.layoutDoc._layout_showTitle)) this.layoutDoc._layout_showTitle = 'title';
         setTimeout(() => this._titleRef.current?.setIsFocused(true)); // use timeout in case title wasn't shown to allow re-render so that titleref will be defined
     };
+    onBrowseClick = (e: React.MouseEvent) => {
+        const browseTransitionTime = 500;
+        SelectionManager.DeselectAll();
+        DocumentManager.Instance.showDocument(this.Document, { zoomScale: 0.8, willZoomCentered: true }, (focused: boolean) => {
+            if (!focused && this._docView) {
+                this._docView
+                    .docViewPath()
+                    .reverse()
+                    .find(cont => cont.ComponentView?.browseTo?.(e.clientX, e.clientY, browseTransitionTime));
+                Doc.linkFollowHighlight(this.Document, false);
+            }
+        });
+        e.stopPropagation();
+    };
     onClick = action((e: React.MouseEvent | React.PointerEvent) => {
         if (this._props.isGroupActive?.() === 'child' && !this._props.isDocumentActive?.()) return;
         const documentView = this._docView;
@@ -393,10 +407,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
         if ((Doc.ActiveTool === InkTool.None || this._props.addDocTab === returnFalse) && !(this._props.TemplateDataDocument && !(e.ctrlKey || e.button > 0))) {
             // click events stop here if the document is active and no modes are overriding it
             // if this is part of a template, let the event go up to the template root unless right/ctrl clicking
-            if (
-                // prettier-ignore
-                (this._props.isDocumentActive?.() || this._props.isContentActive?.()) &&
-                !this._props.onBrowseClickScript?.() &&
+            if ((this._props.isDocumentActive?.() || this._props.isContentActive?.()) &&
+                !SnappingManager.ExploreMode &&
                 !this.Document.ignoreClick &&
                 e.button === 0 &&
                 !Doc.IsInMyOverlay(this.layoutDoc)
@@ -408,7 +420,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 if (!this.layoutDoc._lockedPosition && (!this.isContentActive() || BoolCast(this.layoutDoc._dragWhenActive, this._props.dragWhenActive))) {
                     document.addEventListener('pointermove', this.onPointerMove);
                 }
-            }
+            } // prettier-ignore
             document.addEventListener('pointerup', this.onPointerUp);
         }
     };
@@ -981,7 +993,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 ref={this._mainCont}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}
-                onClick={this.onClick}
+                onClick={SnappingManager.ExploreMode ? this.onBrowseClick : this.onClick}
                 onPointerEnter={() => (!SnappingManager.IsDragging || SnappingManager.CanEmbed) && Doc.BrushDoc(this.Document)}
                 onPointerOver={() => (!SnappingManager.IsDragging || SnappingManager.CanEmbed) && Doc.BrushDoc(this.Document)}
                 onPointerLeave={e => !isParentOf(this._contentDiv, document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y)) && Doc.UnBrushDoc(this.Document)}
@@ -1055,7 +1067,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             recorder.start();
             const stopFunc = () => {
                 recorder.stop();
-                DictationManager.Controls.stop(false);
+                DictationManager.Controls.stop(/* false */);
                 dataDoc.audioAnnoState = AudioAnnoState.stopped;
                 gumStream.getAudioTracks()[0].stop();
             };
@@ -1086,9 +1098,6 @@ export class DocumentView extends DocComponent<DocumentViewProps & { CollectionF
     }
     public ViewGuid = DocumentView.UniquifyId(LightboxView.Contains(this), Utils.GenerateGuid()); // a unique id associated with the main <div>. used by LinkBox's Xanchor to find the arrowhead locations.
     public DocUniqueId = DocumentView.UniquifyId(LightboxView.Contains(this), this.Document[Id]);
-    @computed public static get exploreMode() {
-        return () => (SnappingManager.ExploreMode ? ScriptField.MakeScript('CollectionBrowseClick(documentView, clientX, clientY)', { documentView: 'any', clientX: 'number', clientY: 'number' })! : undefined);
-    }
 
     constructor(props: DocumentViewProps & { CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView }) {
         super(props);
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 3f453eb93..c2f946a88 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -74,7 +74,6 @@ export interface FieldViewSharedProps {
     onDoubleClickScript?: () => ScriptField;
     onPointerDownScript?: () => ScriptField;
     onPointerUpScript?: () => ScriptField;
-    onBrowseClickScript?: () => ScriptField | undefined;
     // eslint-disable-next-line no-use-before-define
     onKey?: (e: React.KeyboardEvent, fieldProps: FieldViewProps) => boolean | undefined;
     layout_fitWidth?: (doc: Doc) => boolean | undefined;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 90b4a6740..617c45715 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -70,7 +70,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
     private _getAnchor: (savedAnnotations: Opt<ObservableMap<number, HTMLDivElement[]>>, addAsAnnotation: boolean) => Opt<Doc> = () => undefined;
     private _overlayIconRef = React.createRef<HTMLDivElement>();
     private _marqueeref = React.createRef<MarqueeAnnotator>();
+    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
+    private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
+    @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @observable _curSuffix = '';
+    @observable _error = '';
+    @observable _isHovering = false; // flag to switch between primary and alternate images on hover
+    _ffref = React.createRef<CollectionFreeFormView>();
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -274,7 +280,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         }
     };
 
-    choosePath(url: URL) {
+    choosePath = (url: URL) => {
         if (!url?.href) return '';
         const lower = url.href.toLowerCase();
         if (url.protocol === 'data') return url.href;
@@ -283,7 +289,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
 
         const ext = extname(url.href);
         return url.href.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
-    }
+    };
     getScrollHeight = () => (this._props.layout_fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined);
 
     @computed get nativeSize() {
@@ -346,9 +352,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         return paths.length ? paths : [defaultUrl.href];
     }
 
-    @observable _error = '';
-
-    @observable _isHovering = false; // flag to switch between primary and alternate images on hover
     @computed get content() {
         TraceMobx();
 
@@ -407,13 +410,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         );
     }
 
-    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
-    private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
-    @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @computed get annotationLayer() {
         TraceMobx();
         return <div className="imageBox-annotationLayer" style={{ height: this._props.PanelHeight() }} ref={this._annotationLayer} />;
     }
+    browseTo = (clientX: number, clientY: number, browseTransitionTime: number) => !!this._ffref.current?.browseTo?.(clientX, clientY, browseTransitionTime);
     screenToLocalTransform = () => this.ScreenToLocalBoxXf().translate(0, NumCast(this.layoutDoc._layout_scrollTop) * this.ScreenToLocalBoxXf().Scale);
     marqueeDown = (e: React.PointerEvent) => {
         if (!this.dataDoc[this.fieldKey]) {
@@ -447,7 +448,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
     };
     focus = (anchor: Doc, options: FocusViewOptions) => (anchor.type === DocumentType.CONFIG ? undefined : this._ffref.current?.focus(anchor, options));
 
-    _ffref = React.createRef<CollectionFreeFormView>();
     savedAnnotations = () => this._savedAnnotations;
     render() {
         TraceMobx();
diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
index 67872efc3..c19528af6 100644
--- a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
+++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
@@ -802,7 +802,6 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<FieldViewProps>
                                           NativeHeight={returnOne}
                                           onKey={undefined}
                                           onDoubleClickScript={undefined}
-                                          onBrowseClickScript={undefined}
                                           childFilters={returnEmptyFilter}
                                           childFiltersByRanges={returnEmptyFilter}
                                           searchFilterDocs={returnEmptyDoclist}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 4b80f2485..fd7997248 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -64,6 +64,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     private _playRegionTimer: any = null; // timeout for playback
     private _controlsFadeTimer: any = null; // timeout for controls fade
+    private _ffref = React.createRef<CollectionFreeFormView>();
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -978,6 +979,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         this._props.bringToFront?.(cropping);
         return cropping;
     };
+    browseTo = (clientX: number, clientY: number, browseTransitionTime: number) => !!this._ffref.current?.browseTo(clientX, clientY, browseTransitionTime);
+    focus = (anchor: Doc, options: FocusViewOptions) => (anchor.type === DocumentType.CONFIG ? undefined : this._ffref.current?.focus(anchor, options));
     savedAnnotations = () => this._savedAnnotations;
     render() {
         const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding);
@@ -1005,6 +1008,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
                         <CollectionFreeFormView
                             // eslint-disable-next-line react/jsx-props-no-spreading
                             {...this._props}
+                            ref={this._ffref}
                             setContentViewBox={emptyFunction}
                             NativeWidth={returnZero}
                             NativeHeight={returnZero}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 3cd8b8b58..52d9c3b31 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -2095,7 +2095,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                         cursor: this._props.isContentActive() ? 'text' : undefined,
                         height: this._props.height ? 'max-content' : undefined,
                         overflow: this.layout_autoHeight ? 'hidden' : undefined,
-                        pointerEvents: Doc.ActiveTool === InkTool.None && !this._props.onBrowseClickScript?.() ? undefined : 'none',
+                        pointerEvents: Doc.ActiveTool === InkTool.None && !SnappingManager.ExploreMode ? undefined : 'none',
                     }}
                     onContextMenu={this.specificContextMenu}
                     onKeyDown={this.onKeyDown}
-- 
cgit v1.2.3-70-g09d2