cleaned up brushView to only apply to freeformviews that aren't overlays (wasn't being used properly. before anyway). cleaned up marquee view divs.

7 files changed, 67 insertions, 85 deletions

diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index ce19b3f9b..493f40d77 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -41,7 +41,6 @@ interface CollectionViewProps_ extends FieldViewProps {
     isAnnotationOverlayScrollable?: boolean; // whether the annotation overlay can be vertically scrolled (just for tree views, currently)
     layoutEngine?: () => string;
     setPreviewCursor?: (func: (x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void) => void;
-    setBrushViewer?: (func?: (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void) => void;
     ignoreUnrendered?: boolean;
 
     // property overrides for child documents
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 0c3033579..d80ea2cb2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -64,8 +64,6 @@ export type collectionFreeformViewProps = {
     noOverlay?: boolean; // used to suppress docs in the overlay (z) layer (ie, for minimap since overlay doesn't scale)
     engineProps?: any;
     getScrollHeight?: () => number | undefined;
-    dontRenderDocuments?: boolean; // used for annotation overlays which need to distribute documents into different freeformviews with different mixBlendModes depending on whether they are transparent or not.
-    // However, this screws up interactions since only the top layer gets events.  so we render the freeformview a 3rd time with all documents in order to get interaction events (eg., marquee) but we don't actually want to display the documents.
 };
 
 @observer
@@ -123,7 +121,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @observable _clusterSets: Doc[][] = [];
     @observable _deleteList: DocumentView[] = [];
     @observable _timelineRef = React.createRef<Timeline>();
-    @observable _marqueeRef: HTMLDivElement | null = null;
     @observable _marqueeViewRef = React.createRef<MarqueeView>();
     @observable GroupChildDrag: boolean = false; // child document view being dragged.  needed to update drop areas of groups when a group item is dragged.
     @observable _brushedView: { width: number; height: number; panX: number; panY: number } | undefined; // highlighted region of freeform canvas used by presentations to indicate a region
@@ -1335,7 +1332,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 sizeProvider={this.childSizeProvider}
                 bringToFront={this.bringToFront}
                 layout_showTitle={this.props.childlayout_showTitle}
-                dontRegisterView={this.props.dontRenderDocuments || this.props.dontRegisterView}
+                dontRegisterView={this.props.dontRegisterView}
                 pointerEvents={this.childPointerEventsFunc}
                 //fitContentsToBox={this.props.fitContentsToBox || BoolCast(this.props.treeView_FreezeChildDimensions)} // bcz: check this
             />
@@ -1571,11 +1568,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return anchor;
     };
 
-    @action
     componentDidMount() {
         this.props.setContentView?.(this);
         super.componentDidMount?.();
-        this.props.setBrushViewer?.(this.brushView);
         setTimeout(
             action(() => {
                 this._firstRender = false;
@@ -1612,9 +1607,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
                 this._disposers.layoutComputation = reaction(
                     () => this.doLayoutComputation,
-                    elements => {
-                        if (elements !== undefined) this._layoutElements = elements || [];
-                    },
+                    elements => elements !== undefined && (this._layoutElements = elements || []),
                     { fireImmediately: true, name: 'doLayout' }
                 );
 
@@ -1709,7 +1702,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     componentWillUnmount() {
         Object.values(this._disposers).forEach(disposer => disposer?.());
-        this._marqueeRef?.removeEventListener('dashDragAutoScroll', this.onDragAutoScroll as any);
     }
 
     @action
@@ -1717,26 +1709,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         //  super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY));
     };
 
-    @action
-    onDragAutoScroll = (e: CustomEvent<React.DragEvent>) => {
-        if ((e as any).handlePan || this.props.isAnnotationOverlay) return;
-        (e as any).handlePan = true;
-
-        if (!this.layoutDoc._freeform_noAutoPan && !this.props.renderDepth && this._marqueeRef) {
-            const dragX = e.detail.clientX;
-            const dragY = e.detail.clientY;
-            const bounds = this._marqueeRef?.getBoundingClientRect();
-
-            const deltaX = dragX - bounds.left < 25 ? -(25 + (bounds.left - dragX)) : bounds.right - dragX < 25 ? 25 - (bounds.right - dragX) : 0;
-            const deltaY = dragY - bounds.top < 25 ? -(25 + (bounds.top - dragY)) : bounds.bottom - dragY < 25 ? 25 - (bounds.bottom - dragY) : 0;
-            if (deltaX !== 0 || deltaY !== 0) {
-                this.Document[this.panYFieldKey] = NumCast(this.Document[this.panYFieldKey]) + deltaY / 2;
-                this.Document[this.panXFieldKey] = NumCast(this.Document[this.panXFieldKey]) + deltaX / 2;
-            }
-        }
-        e.stopPropagation();
-    };
-
     @undoBatch
     promoteCollection = () => {
         const childDocs = this.childDocs.slice();
@@ -1926,11 +1898,41 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         DashColor(lightOrDark(this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor)))
             .fade(0.6)
             .toString();
+    @computed get backgroundGrid() {
+        return (
+            <div>
+                <CollectionFreeFormBackgroundGrid // bcz : UGHH  don't know why, but if we don't wrap in a div, then PDF's don't render when taking snapshot of a dashboard and the background grid is on!!?
+                    PanelWidth={this.props.PanelWidth}
+                    PanelHeight={this.props.PanelHeight}
+                    panX={this.panX}
+                    panY={this.panY}
+                    color={this.gridColor}
+                    nativeDimScaling={this.nativeDim}
+                    zoomScaling={this.zoomScaling}
+                    layoutDoc={this.layoutDoc}
+                    isAnnotationOverlay={this.isAnnotationOverlay}
+                    cachedCenteringShiftX={this.cachedCenteringShiftX}
+                    cachedCenteringShiftY={this.cachedCenteringShiftY}
+                />
+            </div>
+        );
+    }
+    @computed get pannableContents() {
+        return (
+            <CollectionFreeFormViewPannableContents
+                rootDoc={this.rootDoc}
+                brushedView={this.brushedView}
+                isAnnotationOverlay={this.isAnnotationOverlay}
+                transform={this.contentTransform}
+                transition={this._panZoomTransition ? `transform ${this._panZoomTransition}ms` : Cast(this.layoutDoc._viewTransition, 'string', Cast(this.props.DocumentView?.()?.rootDoc._viewTransition, 'string', null))}
+                viewDefDivClick={this.props.viewDefDivClick}>
+                {this.children}
+            </CollectionFreeFormViewPannableContents>
+        );
+    }
     @computed get marqueeView() {
         TraceMobx();
-        return this._firstRender ? (
-            this.placeholder
-        ) : (
+        return (
             <MarqueeView
                 {...this.props}
                 ref={this._marqueeViewRef}
@@ -1945,41 +1947,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 addLiveTextDocument={this.addLiveTextBox}
                 getContainerTransform={this.getContainerTransform}
                 getTransform={this.getTransform}
+                panXFieldKey={this.panXFieldKey}
+                panYFieldKey={this.panYFieldKey}
                 isAnnotationOverlay={this.isAnnotationOverlay}>
-                <div
-                    className="marqueeView-div"
-                    ref={r => {
-                        this._marqueeRef = r;
-                        r?.addEventListener('dashDragAutoScroll', this.onDragAutoScroll as any);
-                    }}
-                    style={{ opacity: this.props.dontRenderDocuments ? 0.7 : undefined }}>
-                    {this.layoutDoc._freeform_backgroundGrid ? (
-                        <div>
-                            <CollectionFreeFormBackgroundGrid // bcz : UGHH  don't know why, but if we don't wrap in a div, then PDF's don't render when taking snapshot of a dashboard and the background grid is on!!?
-                                PanelWidth={this.props.PanelWidth}
-                                PanelHeight={this.props.PanelHeight}
-                                panX={this.panX}
-                                panY={this.panY}
-                                color={this.gridColor}
-                                nativeDimScaling={this.nativeDim}
-                                zoomScaling={this.zoomScaling}
-                                layoutDoc={this.layoutDoc}
-                                isAnnotationOverlay={this.isAnnotationOverlay}
-                                cachedCenteringShiftX={this.cachedCenteringShiftX}
-                                cachedCenteringShiftY={this.cachedCenteringShiftY}
-                            />
-                        </div>
-                    ) : null}
-                    <CollectionFreeFormViewPannableContents
-                        rootDoc={this.rootDoc}
-                        brushedView={this.brushedView}
-                        isAnnotationOverlay={this.isAnnotationOverlay}
-                        transform={this.contentTransform}
-                        transition={this._panZoomTransition ? `transform ${this._panZoomTransition}ms` : Cast(this.layoutDoc._viewTransition, 'string', Cast(this.props.DocumentView?.()?.rootDoc._viewTransition, 'string', null))}
-                        viewDefDivClick={this.props.viewDefDivClick}>
-                        {this.children}
-                    </CollectionFreeFormViewPannableContents>
-                </div>
+                {this.layoutDoc._freeform_backgroundGrid ? this.backgroundGrid : null}
+                {this.pannableContents}
                 {this._showAnimTimeline ? <Timeline ref={this._timelineRef} {...this.props} /> : null}
             </MarqueeView>
         );
@@ -2073,7 +2045,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     </div>
                 ) : (
                     <>
-                        {this.marqueeView}
+                        {this._firstRender ? this.placeholder : this.marqueeView}
                         {this.props.noOverlay ? null : <CollectionFreeFormOverlayView elements={this.elementFunc} />}
                         {!this.GroupChildDrag ? null : <div className="collectionFreeForm-groupDropper" />}
                     </>
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index a30ec5302..edcc17afd 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -7,7 +7,7 @@ import { InkData, InkField, InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { Cast, FieldValue, NumCast, StrCast } from '../../../../fields/Types';
-import { ImageField } from '../../../../fields/URLField';
+import { ImageField, nullAudio } from '../../../../fields/URLField';
 import { GetEffectiveAcl } from '../../../../fields/util';
 import { intersectRect, lightOrDark, returnFalse, Utils } from '../../../../Utils';
 import { CognitiveServices } from '../../../cognitive_services/CognitiveServices';
@@ -35,6 +35,8 @@ interface MarqueeViewProps {
     selectDocuments: (docs: Doc[]) => void;
     addLiveTextDocument: (doc: Doc) => void;
     isSelected: () => boolean;
+    panXFieldKey: string;
+    panYFieldKey: string;
     trySelectCluster: (addToSel: boolean) => boolean;
     nudge?: (x: number, y: number, nudgeTime?: number) => boolean;
     ungroup?: () => void;
@@ -651,11 +653,35 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             </div>
         );
     }
+    MarqueeRef: HTMLDivElement | null = null;
 
+    @action
+    onDragAutoScroll = (e: CustomEvent<React.DragEvent>) => {
+        if ((e as any).handlePan || this.props.isAnnotationOverlay) return;
+        (e as any).handlePan = true;
+
+        const bounds = this.MarqueeRef?.getBoundingClientRect();
+        if (!this.props.Document._freeform_noAutoPan && !this.props.renderDepth && bounds) {
+            const dragX = e.detail.clientX;
+            const dragY = e.detail.clientY;
+
+            const deltaX = dragX - bounds.left < 25 ? -(25 + (bounds.left - dragX)) : bounds.right - dragX < 25 ? 25 - (bounds.right - dragX) : 0;
+            const deltaY = dragY - bounds.top < 25 ? -(25 + (bounds.top - dragY)) : bounds.bottom - dragY < 25 ? 25 - (bounds.bottom - dragY) : 0;
+            if (deltaX !== 0 || deltaY !== 0) {
+                this.props.Document[this.props.panYFieldKey] = NumCast(this.props.Document[this.props.panYFieldKey]) + deltaY / 2;
+                this.props.Document[this.props.panXFieldKey] = NumCast(this.props.Document[this.props.panXFieldKey]) + deltaX / 2;
+            }
+        }
+        e.stopPropagation();
+    };
     render() {
         return (
             <div
                 className="marqueeView"
+                ref={r => {
+                    r?.addEventListener('dashDragAutoScroll', this.onDragAutoScroll as any);
+                    this.MarqueeRef = r;
+                }}
                 style={{
                     overflow: StrCast(this.props.Document._overflow),
                     cursor: [InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool) || this._visible ? 'crosshair' : 'pointer',
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 537da5055..c068d9dd7 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -212,8 +212,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     }
 
-    brushView = (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => this._pdfViewer?.brushView(view, transTime);
-
     sidebarAddDocTab = (doc: Doc, where: OpenWhere) => {
         if (DocListCast(this.props.Document[this.props.fieldKey + '_sidebar']).includes(doc) && !this.SidebarShown) {
             this.toggleSidebar(false);
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 58a765d61..66e0ed21f 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -51,7 +51,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     public static sidebarResizerWidth = 5;
     static webStyleSheet = addStyleSheet();
     private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void);
-    private _setBrushViewer: undefined | ((view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void);
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
     private _outerRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _disposers: { [name: string]: IReactionDisposer } = {};
@@ -275,8 +274,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return this._savedAnnotations;
     };
 
-    setBrushViewer = (func?: (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void) => (this._setBrushViewer = func);
-    brushView = (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => this._setBrushViewer?.(view, transTime);
     focus = (anchor: Doc, options: DocFocusOptions) => {
         if (anchor !== this.rootDoc && this._outerRef.current) {
             const windowHeight = this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1);
@@ -971,7 +968,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 isAnnotationOverlay={true}
                 fieldKey={this.annotationKey}
                 setPreviewCursor={this.setPreviewCursor}
-                setBrushViewer={this.setBrushViewer}
                 PanelWidth={this.panelWidth}
                 PanelHeight={this.panelHeight}
                 ScreenToLocalTransform={this.scrollXf}
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 05810b63a..3d7c68bcd 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -571,11 +571,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (bestTarget._layout_scrollTop !== activeItem.config_scrollTop) {
                 bestTarget._layout_scrollTop = activeItem.config_scrollTop;
                 changed = true;
-                const contentBounds = Cast(activeItem.config_viewBounds, listSpec('number'));
-                if (contentBounds) {
-                    const dv = DocumentManager.Instance.getDocumentView(bestTarget)?.ComponentView;
-                    dv?.brushView?.({ panX: (contentBounds[0] + contentBounds[2]) / 2, panY: (contentBounds[1] + contentBounds[3]) / 2, width: contentBounds[2] - contentBounds[0], height: contentBounds[3] - contentBounds[1] }, transTime);
-                }
             }
         }
         if (pinDataTypes?.dataannos || (!pinDataTypes && activeItem.config_annotations !== undefined)) {
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 939928c1c..2e494aa45 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -68,7 +68,6 @@ export class PDFViewer extends React.Component<IViewerProps> {
     private _styleRule: any; // stylesheet rule for making hyperlinks clickable
     private _retries = 0; // number of times tried to create the PDF viewer
     private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void);
-    private _setBrushViewer: undefined | ((view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void);
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _viewer: React.RefObject<HTMLDivElement> = React.createRef();
@@ -193,7 +192,6 @@ export class PDFViewer extends React.Component<IViewerProps> {
         return focusSpeed;
     };
     crop = (region: Doc | undefined, addCrop?: boolean) => this.props.crop(region, addCrop);
-    brushView = (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => this._setBrushViewer?.(view, transTime);
 
     @action
     setupPdfJsViewer = async () => {
@@ -469,7 +467,6 @@ export class PDFViewer extends React.Component<IViewerProps> {
     };
 
     setPreviewCursor = (func?: (x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void) => (this._setPreviewCursor = func);
-    setBrushViewer = (func?: (view: { width: number; height: number; panX: number; panY: number }, transTime: number) => void) => (this._setBrushViewer = func);
 
     @action
     onZoomWheel = (e: React.WheelEvent) => {
@@ -546,7 +543,6 @@ export class PDFViewer extends React.Component<IViewerProps> {
                 fieldKey={this.props.fieldKey + '_annotations'}
                 getScrollHeight={this.getScrollHeight}
                 setPreviewCursor={this.setPreviewCursor}
-                setBrushViewer={this.setBrushViewer}
                 PanelHeight={this.panelHeight}
                 PanelWidth={this.panelWidth}
                 ScreenToLocalTransform={this.overlayTransform}