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

1 files changed, 40 insertions, 68 deletions

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" />}
                     </>