From 0e9a512020c145a11357aac8573dd6cb24197748 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 19 Apr 2021 19:17:17 -0400
Subject: fixed crash with lightboxview and stepping into an image.

---
 src/client/views/nodes/ImageBox.tsx | 44 ++++++++++++++++++-------------------
 src/client/views/nodes/VideoBox.tsx | 21 +++++++++---------
 2 files changed, 33 insertions(+), 32 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 1ab367395..c7067f313 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,14 +1,13 @@
-import { action, computed, IReactionDisposer, observable, reaction, runInAction, ObservableMap, untracked } from 'mobx';
+import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from "mobx-react";
-import { Dictionary } from 'typescript-collections';
 import { DataSym, Doc, DocListCast, WidthSym } from '../../../fields/Doc';
 import { documentSchema } from '../../../fields/documentSchemas';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
-import { createSchema, listSpec, makeInterface } from '../../../fields/Schema';
+import { createSchema, makeInterface } from '../../../fields/Schema';
 import { ComputedField } from '../../../fields/ScriptField';
-import { Cast, NumCast, StrCast } from '../../../fields/Types';
+import { Cast, NumCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
 import { emptyFunction, OmitKeys, returnOne, Utils } from '../../../Utils';
@@ -59,8 +58,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         this._dropDisposer?.();
         ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.props.Document));
     }
+    setViewSpec = (anchor: Doc, preview: boolean) => {
+
+    } // sets viewing information for a componentview, typically when following a link. 'preview' tells the view to use the values without writing to the document
 
     componentDidMount() {
+        this.props.setContentView?.(this); // bcz: do not remove this.  without it, stepping into an image in the lightbox causes an infinite loop....
         this._disposers.sizer = reaction(() => (
             {
                 forceFull: this.props.renderDepth < 1 || this.layoutDoc._showFullRes,
@@ -315,6 +318,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @observable _marqueeing: number[] | undefined;
     @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @computed get annotationLayer() {
+        TraceMobx();
         return <div className="imageBox-annotationLayer" style={{ height: this.props.PanelHeight() }} ref={this._annotationLayer} />;
     }
     @action
@@ -331,7 +335,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         TraceMobx();
         const borderRad = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding);
         const borderRadius = borderRad?.includes("px") ? `${Number(borderRad.split("px")[0]) / (this.props.scaling?.() || 1)}px` : borderRad;
-        return (<div className={`imageBox`} onContextMenu={this.specificContextMenu} ref={this._mainCont}
+        return (<div className="imageBox" onContextMenu={this.specificContextMenu} ref={this._mainCont}
             style={{
                 width: this.props.PanelWidth() ? undefined : `100%`,
                 height: this.props.PanelWidth() ? undefined : `100%`,
@@ -340,32 +344,28 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             }} >
             <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
                 renderDepth={this.props.renderDepth + 1}
-                ContainingCollectionDoc={this.props.ContainingCollectionDoc}
-                CollectionView={undefined}
-                PanelHeight={this.props.PanelHeight}
-                scaling={returnOne}
-                ScreenToLocalTransform={this.screenToLocalTransform}
-                PanelWidth={this.props.PanelWidth}
                 fieldKey={this.annotationKey}
+                CollectionView={undefined}
                 isAnnotationOverlay={true}
-                docFilters={this.props.docFilters}
-                docRangeFilters={this.props.docRangeFilters}
-                searchFilterDocs={this.props.searchFilterDocs}
-                removeDocument={this.removeDocument}
-                moveDocument={this.moveDocument}
-                addDocument={this.addDocument}
                 annotationLayerHostsContent={true}
-                focus={this.props.focus}
-                isSelected={this.props.isSelected}
+                PanelWidth={this.props.PanelWidth}
+                PanelHeight={this.props.PanelHeight}
+                ScreenToLocalTransform={this.screenToLocalTransform}
                 select={emptyFunction}
                 isContentActive={this.isContentActive}
-                whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}>
+                scaling={returnOne}
+                whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                removeDocument={this.removeDocument}
+                moveDocument={this.moveDocument}
+                addDocument={this.addDocument}>
                 {this.contentFunc}
             </CollectionFreeFormView>
             {this.annotationLayer}
             {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
-                <MarqueeAnnotator rootDoc={this.rootDoc}
-                    scrollTop={0} down={this._marqueeing}
+                <MarqueeAnnotator
+                    rootDoc={this.rootDoc}
+                    scrollTop={0}
+                    down={this._marqueeing}
                     scaling={this.props.scaling}
                     docView={this.props.docViewPath().lastElement()}
                     addDocument={this.addDocument}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index fb58ddefc..8b75f45b0 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -567,22 +567,22 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             <div className="videoBox-viewer" onPointerDown={this.marqueeDown} >
                 <div style={{ position: "absolute", transition: this.transition, width: this.panelWidth(), height: this.panelHeight(), top: 0, left: `${(100 - this.heightPercent) / 2}%` }}>
                     <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
+                        renderDepth={this.props.renderDepth + 1}
                         fieldKey={this.annotationKey}
+                        CollectionView={undefined}
                         isAnnotationOverlay={true}
                         annotationLayerHostsContent={true}
-                        select={emptyFunction}
-                        isContentActive={this.isContentActive}
-                        scaling={returnOne}
-                        docFilters={this.timelineDocFilter}
                         PanelWidth={this.panelWidth}
                         PanelHeight={this.panelHeight}
                         ScreenToLocalTransform={this.screenToLocalTransform}
+                        docFilters={this.timelineDocFilter}
+                        select={emptyFunction}
+                        isContentActive={this.isContentActive}
+                        scaling={returnOne}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                         removeDocument={this.removeDocument}
                         moveDocument={this.moveDocument}
-                        addDocument={this.addDocWithTimecode}
-                        CollectionView={undefined}
-                        renderDepth={this.props.renderDepth + 1}>
+                        addDocument={this.addDocWithTimecode}>
                         {this.contentFunc}
                     </CollectionFreeFormView>
                 </div>
@@ -591,16 +591,17 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 {this.renderTimeline}
                 {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) :
                     <MarqueeAnnotator
-                        scrollTop={0}
                         rootDoc={this.rootDoc}
+                        scrollTop={0}
                         down={this._marqueeing}
-                        docView={this.props.docViewPath().lastElement()}
                         scaling={this.marqueeFitScaling}
+                        docView={this.props.docViewPath().lastElement()}
                         containerOffset={this.marqueeOffset}
                         addDocument={this.addDocWithTimecode}
                         finishMarquee={this.finishMarquee}
                         savedAnnotations={this._savedAnnotations}
-                        annotationLayer={this._annotationLayer.current} mainCont={this._mainCont.current}
+                        annotationLayer={this._annotationLayer.current}
+                        mainCont={this._mainCont.current}
                     />}
             </div>
         </div >);
-- 
cgit v1.2.3-70-g09d2