cleaned up explore mode to use focus(). fixed focusing on group doc elements to not focus on group first.

7 files changed, 27 insertions, 22 deletions

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index ac3721436..5a6ce528f 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -272,7 +272,8 @@ export class DocumentManager {
         docContextPath.shift();
         const childViewIterator = async (docView: DocumentView) => {
             const innerDoc = docContextPath.shift();
-            return { focused: false, viewSpec: innerDoc, childDocView: innerDoc && !innerDoc.layout_unrendered ? (await docView.ComponentView?.getView?.(innerDoc, options)) ?? this.getDocumentView(innerDoc) : undefined };
+            const viewSpec = innerDoc?.isGroup ? (docContextPath[0] ?? innerDoc) : innerDoc;
+            return { focused: false, viewSpec: viewSpec, childDocView: innerDoc && !innerDoc.layout_unrendered ? (await docView.ComponentView?.getView?.(innerDoc, options)) ?? this.getDocumentView(innerDoc) : undefined };
         };
 
         if (rootContextView) {
@@ -294,6 +295,7 @@ export class DocumentManager {
         let contextView: DocumentView | undefined; // view containing context that contains target
         let focused = false;
         let docView = docViewIn;
+        let anchor = docView.Document;
         const options = optionsIn;
         const maxFocusLength = 100; // want to keep focusing until we get to target, but avoid an infinite loop
         for (let i = 0; i < maxFocusLength; i++) {
@@ -306,13 +308,14 @@ export class DocumentManager {
                 await prom;
                 options.didMove = true;
             }
-            const nextFocus = docView._props.focus(docView.Document, options); // focus the view within its container
+            const nextFocus = docView._props.focus(anchor, options); // focus the view within its container
             focused = focused || nextFocus !== undefined; // keep track of whether focusing on a view needed to actually change anything
             // eslint-disable-next-line no-await-in-loop
             const { childDocView, viewSpec } = await iterator(docView);
             if (!childDocView) return { viewSpec: viewSpec ?? docView.Document, docView, contextView, focused };
             contextView = !childDocView.Document.layout_unrendered ? childDocView : docView;
             docView = childDocView;
+            anchor = viewSpec ?? docView.Document;
         }
         return undefined;
     };
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index fd0b4e83f..bbd902a96 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -68,7 +68,6 @@ export interface ViewBoxInterface {
     removeDocument?: (doc: Doc | Doc[], annotationKey?: string, leavePushpin?: boolean, dontAddToRemoved?: boolean) => boolean; // add a document (used only by collections)
     select?: (ctrlKey: boolean, shiftKey: boolean) => void;
     focus?: (textAnchor: Doc, options: FocusViewOptions) => Opt<number>;
-    browseTo?: (clientX: number, clientY: number, browseTransitionTime: number) => boolean; // when in explore mode, this allows a component view to display itself in an easy to read way (ie, a document in a freeformview will zoom itself to mostly full screen)
     viewTransition?: () => Opt<string>; // duration of a view transition animation
     isAnyChildContentActive?: () => boolean; // is any child content of the document active
     onClickScriptDisable?: () => 'never' | 'always'; // disable click scripts : never, always, or undefined = only when selected
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d3998aee8..8a859a3fd 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -309,8 +309,23 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return dispTime === -1 || curTime === -1 || (curTime - dispTime >= -1e-4 && curTime <= endTime);
     }
 
+    focusOnPoint = (options: FocusViewOptions) => {
+        const {pointFocus, zoomTime, didMove} = options;
+        if (!this.Document.isGroup && pointFocus && !didMove) {
+            const dfltScale = this.isAnnotationOverlay ? 1 : 0.5;
+            if (this.layoutDoc[this.scaleFieldKey] !== dfltScale) {
+                this.zoomSmoothlyAboutPt(this.screenToFreeformContentsXf.transformPoint(pointFocus.X, pointFocus.Y), dfltScale, zoomTime);
+                options.didMove = true;
+                return zoomTime;
+            }
+        }
+        return undefined;
+    };
+
     groupFocus = (anchor: Doc, options: FocusViewOptions) => {
-        options.docTransform = new Transform(-NumCast(this.layoutDoc[this.panXFieldKey]) + NumCast(anchor.x), -NumCast(this.layoutDoc[this.panYFieldKey]) + NumCast(anchor.y), 1);
+        if (options.pointFocus) return this.focusOnPoint(options);
+        options.docTransform = new Transform(NumCast(anchor.x) + NumCast(anchor._width)/2 - NumCast(this.layoutDoc[this.panXFieldKey]),
+                                             NumCast(anchor.y) + NumCast(anchor._height)/2- NumCast(this.layoutDoc[this.panYFieldKey]), 1); // prettier-ignore
         const res = this._props.focus(this.Document, options);
         options.docTransform = undefined;
         return res;
@@ -318,6 +333,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     focus = (anchor: Doc, options: FocusViewOptions) => {
         if (this._lightboxDoc) return undefined;
+        if (options.pointFocus) return this.focusOnPoint(options);
         if (anchor === this.Document) {
             // if (options.willZoomCentered && options.zoomScale) {
             //     this.fitContentOnce();
@@ -1980,19 +1996,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             </div>
         );
     }
-    browseTo = (clientX: number, clientY: number, browseTransitionTime: number): boolean => {
-        if (!this.Document.isGroup) {
-            const dfltScale = this.isAnnotationOverlay ? 1 : 0.5;
-            if (this.layoutDoc[this.scaleFieldKey] !== dfltScale) {
-                this.zoomSmoothlyAboutPt(this.screenToFreeformContentsXf.transformPoint(clientX, clientY), dfltScale, browseTransitionTime);
-                return true;
-            }
-            return !!this.DocumentView?.()
-                .containerViewPath?.()
-                ?.some(cont => cont.ComponentView?.browseTo?.(clientX, clientY, browseTransitionTime));
-        }
-        return false;
-    };
 }
 
 @observer
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 555b4ba92..626e3d899 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -50,7 +50,7 @@ import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView
 import { DocumentContentsView, ObserverJsxParser } from './DocumentContentsView';
 import { DocumentLinksButton } from './DocumentLinksButton';
 import './DocumentView.scss';
-import { FieldViewProps, FieldViewSharedProps } from './FieldView';
+import { FieldViewProps, FieldViewSharedProps, FocusViewOptions } from './FieldView';
 import { KeyValueBox } from './KeyValueBox';
 import { LinkAnchorBox } from './LinkAnchorBox';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
@@ -314,11 +314,12 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
         const browseTransitionTime = 500;
         SelectionManager.DeselectAll();
         DocumentManager.Instance.showDocument(this.Document, { zoomScale: 0.8, willZoomCentered: true }, (focused: boolean) => {
+            const options:FocusViewOptions = { pointFocus: {X: e.clientX, Y :e.clientY}, zoomTime: browseTransitionTime};
             if (!focused && this._docView) {
                 this._docView
                     .docViewPath()
                     .reverse()
-                    .find(cont => cont.ComponentView?.browseTo?.(e.clientX, e.clientY, browseTransitionTime));
+                    .forEach(cont => cont.ComponentView?.focus?.(cont.Document, options));
                 Doc.linkFollowHighlight(this.Document, false);
             }
         });
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index c2f946a88..52dc632ae 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -22,7 +22,7 @@ export interface FocusViewOptions {
     docTransform?: Transform; // when a document can't be panned and zoomed within its own container (say a group), then we need to continue to move up the render hierarchy to find something that can pan and zoom.  when this happens the docTransform must accumulate all the transforms of each level of the hierarchy
     instant?: boolean; // whether focus should happen instantly (as opposed to smooth zoom)
     preview?: boolean; // whether changes should be previewed by the componentView or written to the document
-    effect?: Doc; // animation effect for focus
+    effect?: Doc; // animation effect for focus // bcz: needs to be changed to something more generic than a Doc
     noSelect?: boolean; // whether target should be selected after focusing
     playAudio?: boolean; // whether to play audio annotation on focus
     playMedia?: boolean; // whether to play start target videos
@@ -30,6 +30,7 @@ export interface FocusViewOptions {
     zoomTextSelections?: boolean; // whether to display a zoomed overlay of anchor text selections
     toggleTarget?: boolean; // whether to toggle target on and off
     easeFunc?: 'linear' | 'ease'; // transition method for scrolling
+    pointFocus?: {X:number, Y: number }; // clientX and clientY coordinates to focus on instead of a document target (used by explore mode)
 }
 export type FocusFuncType = (doc: Doc, options: FocusViewOptions) => Opt<number>;
 // eslint-disable-next-line no-use-before-define
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 617c45715..db28d0a48 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -414,7 +414,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() impl
         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]) {
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index fd7997248..b8ec0081a 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -979,7 +979,6 @@ 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() {