fixing more .props => ._props refernces.

13 files changed, 54 insertions, 72 deletions

diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index a11c53d4d..bf308904e 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -143,10 +143,10 @@ export class CollectionCarousel3DView extends CollectionSubView() {
         const whichButton = this.layoutDoc.showScrollButton;
         return (
             <>
-                <div className={`carousel3DView-back-scroll${whichButton === 'back' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(-1)}>
+                <div className={`carousel3DView-back-scroll${whichButton === 'back' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(-1)}>
                     {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={'pause'} size={'1x'} /> : <FontAwesomeIcon icon={'angle-double-left'} size={'1x'} />}
                 </div>
-                <div className={`carousel3DView-fwd-scroll${whichButton === 'fwd' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(1)}>
+                <div className={`carousel3DView-fwd-scroll${whichButton === 'fwd' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(1)}>
                     {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={'pause'} size={'1x'} /> : <FontAwesomeIcon icon={'angle-double-right'} size={'1x'} />}
                 </div>
             </>
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 5d09f14ef..b6acf3153 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -120,7 +120,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                     color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color),
                 }}>
                 {this.content}
-                {this.props.Document._chromeHidden ? null : this.buttons}
+                {this.Document._chromeHidden ? null : this.buttons}
             </div>
         );
     }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 868df7a3b..c46f54c70 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -493,7 +493,7 @@ export class CollectionDockingView extends CollectionSubView() {
             Doc.RemoveDocFromList(Doc.GetProto(tab.DashDoc), 'proto_embeddings', tab.DashDoc);
         }
         if (CollectionDockingView.Instance) {
-            const dview = CollectionDockingView.Instance.props.Document;
+            const dview = CollectionDockingView.Instance.Document;
             const fieldKey = CollectionDockingView.Instance.props.fieldKey;
             Doc.RemoveDocFromList(dview, fieldKey, tab.DashDoc);
             this.tabMap.delete(tab);
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 2a6cb081f..98ae01591 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -446,7 +446,7 @@ export class CollectionNoteTakingViewChrome extends React.Component<CollectionVi
     @observable private suggestions: string[] = [];
 
     get document() {
-        return this.props.docView.props.Document;
+        return this.props.docView.Document;
     }
 
     @computed private get descending() {
@@ -572,7 +572,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
     @observable private resize = false;
     private resizeListenerDisposer: Opt<Lambda>;
     get document() {
-        return this.props.docView.props.Document;
+        return this.props.docView.Document;
     }
 
     @computed get panelWidth() {
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index f9d258490..0744814dd 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -527,7 +527,7 @@ export class CollectionNoteTakingView extends CollectionSubView() {
                 addDocument={this.addDocument}
                 chromeHidden={this.chromeHidden}
                 colHeaderData={this.colHeaderData}
-                Document={this.props.Document}
+                Document={this.Document}
                 TemplateDataDocument={this.props.TemplateDataDocument}
                 resizeColumns={this.resizeColumns}
                 renderChildren={this.children}
diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx
index e5068645f..359fdf543 100644
--- a/src/client/views/collections/CollectionPileView.tsx
+++ b/src/client/views/collections/CollectionPileView.tsx
@@ -94,7 +94,7 @@ export class CollectionPileView extends CollectionSubView() {
             DocUtils.pileup(this.childDocs, undefined, undefined, NumCast(this.layoutDoc._width) / 2, false);
             this.layoutDoc._freeform_panX = 0;
             this.layoutDoc._freeform_panY = -10;
-            this.props.Document._freeform_pileEngine = computePassLayout.name;
+            this.Document._freeform_pileEngine = computePassLayout.name;
         } else {
             const defaultSize = NumCast(this.Document._starburstDiameter, 400);
             this.Document.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width) / 2 - defaultSize / 2;
@@ -104,7 +104,7 @@ export class CollectionPileView extends CollectionSubView() {
             this.layoutDoc._freeform_panX = this.layoutDoc._freeform_panY = 0;
             this.layoutDoc._width = this.layoutDoc._height = defaultSize;
             this.layoutDoc.background;
-            this.props.Document._freeform_pileEngine = computeStarburstLayout.name;
+            this.Document._freeform_pileEngine = computeStarburstLayout.name;
         }
     });
 
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index fa3844aa4..a63688354 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -843,7 +843,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
         return (
             <div style={{ pointerEvents: this.noEvents ? 'none' : undefined }}>
                 {inner.view}
-                {!inner.anchor.view || !inner.anchor.view.SELECTED ? null : (
+                {!inner.anchor.view || !inner.anchor.view.IsSelected ? null : (
                     <>
                         <div key="left" className="collectionStackedTimeline-left-resizer" style={{ pointerEvents: this.noEvents ? 'none' : undefined }} onPointerDown={e => this.onAnchorDown(e, this._props.mark, true)} />
                         <div key="right" className="collectionStackedTimeline-resizer" style={{ pointerEvents: this.noEvents ? 'none' : undefined }} onPointerDown={e => this.onAnchorDown(e, this._props.mark, false)} />
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 72882ac17..f2ceaa681 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -169,7 +169,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
         return this.childDocList(this.fieldKey + '_annotations');
     }
     @computed get selected() {
-        return this._docRef?.SELECTED;
+        return this._docRef?.IsSelected;
     }
 
     childDocList(field: string) {
@@ -204,10 +204,10 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
         this._disposers.selection?.();
         if (!docView) {
             this._editTitle = false;
-        } else if (docView.SELECTED) {
+        } else if (docView.IsSelected) {
             this._editTitle = true;
             this._disposers.selection = reaction(
-                () => docView.SELECTED,
+                () => docView.IsSelected,
                 isSel => !isSel && this.setEditTitle(undefined)
             );
         } else {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 6337c8d34..6131fe037 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -229,8 +229,8 @@ export class CollectionFreeFormLinkView extends ObservableReactComponent<Collect
         const pt2normlen = Math.sqrt(pt2norm[0] * pt2norm[0] + pt2norm[1] * pt2norm[1]) || 1;
         const pt1normalized = [pt1norm[0] / pt1normlen, pt1norm[1] / pt1normlen];
         const pt2normalized = [pt2norm[0] / pt2normlen, pt2norm[1] / pt2normlen];
-        const aActive = A.SELECTED || A.Document[Brushed];
-        const bActive = B.SELECTED || B.Document[Brushed];
+        const aActive = A.IsSelected || A.Document[Brushed];
+        const bActive = B.IsSelected || B.Document[Brushed];
 
         const textX = (Math.min(pt1[0], pt2[0]) + Math.max(pt1[0], pt2[0])) / 2 + NumCast(LinkDocs[0].link_relationship_OffsetX);
         const textY = (pt1[1] + pt2[1]) / 2 + NumCast(LinkDocs[0].link_relationship_OffsetY);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index cc0833698..44654c8fe 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -912,7 +912,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 for (var j = 0; j < otherCtrlPts.length - 3; j += 4) {
                     const neighboringSegment = i === j || i === j - 4 || i === j + 4;
                     // Ensuring that the curve intersected by the eraser is not checked for further ink intersections.
-                    if (ink?.Document === otherInk.props.Document && neighboringSegment) continue;
+                    if (ink?.Document === otherInk.Document && neighboringSegment) continue;
 
                     const otherCurve = new Bezier(otherCtrlPts.slice(j, j + 4).map(p => ({ x: p.X, y: p.Y })));
                     const c0 = otherCurve.get(0);
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 3e75257e5..0f750c4f8 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -33,35 +33,35 @@ export class CollectionGridView extends CollectionSubView() {
     onChildClickHandler = () => ScriptCast(this.Document.onChildClick);
 
     @computed get numCols() {
-        return NumCast(this.props.Document.gridNumCols, 10);
+        return NumCast(this.Document.gridNumCols, 10);
     }
     @computed get rowHeight() {
-        return this._rowHeight === undefined ? NumCast(this.props.Document.gridRowHeight, 100) : this._rowHeight;
+        return this._rowHeight === undefined ? NumCast(this.Document.gridRowHeight, 100) : this._rowHeight;
     }
     // sets the default width and height of the grid nodes
     @computed get defaultW() {
-        return NumCast(this.props.Document.gridDefaultW, 2);
+        return NumCast(this.Document.gridDefaultW, 2);
     }
     @computed get defaultH() {
-        return NumCast(this.props.Document.gridDefaultH, 2);
+        return NumCast(this.Document.gridDefaultH, 2);
     }
 
     @computed get colWidthPlusGap() {
-        return (this.props.PanelWidth() - this.margin) / this.numCols;
+        return (this._props.PanelWidth() - this.margin) / this.numCols;
     }
     @computed get rowHeightPlusGap() {
         return this.rowHeight + this.margin;
     }
 
     @computed get margin() {
-        return NumCast(this.props.Document.margin, 10);
+        return NumCast(this.Document.margin, 10);
     } // sets the margin between grid nodes
 
     @computed get flexGrid() {
-        return BoolCast(this.props.Document.gridFlex, true);
+        return BoolCast(this.Document.gridFlex, true);
     } // is grid static/flexible i.e. whether nodes be moved around and resized
     @computed get compaction() {
-        return StrCast(this.props.Document.gridStartCompaction, StrCast(this.props.Document.gridCompaction, 'vertical'));
+        return StrCast(this.Document.gridStartCompaction, StrCast(this.Document.gridCompaction, 'vertical'));
     } // is grid static/flexible i.e. whether nodes be moved around and resized
 
     /**
@@ -94,12 +94,12 @@ export class CollectionGridView extends CollectionSubView() {
 
         // updates the layouts if the reset button has been clicked
         this._resetListenerDisposer = reaction(
-            () => this.props.Document.gridResetLayout,
+            () => this.Document.gridResetLayout,
             reset => {
                 if (reset && this.flexGrid) {
                     this.setLayout(this.childLayoutPairs.map((pair, index) => this.makeLayoutItem(pair.layout, this.unflexedPosition(index))));
                 }
-                this.props.Document.gridResetLayout = false;
+                this.Document.gridResetLayout = false;
             }
         );
     }
@@ -130,7 +130,7 @@ export class CollectionGridView extends CollectionSubView() {
      * Maps the x- and y- coordinates of the event to a grid cell.
      */
     screenToCell(sx: number, sy: number) {
-        const pt = this.props.ScreenToLocalTransform().transformPoint(sx, sy);
+        const pt = this._props.ScreenToLocalTransform().transformPoint(sx, sy);
         const x = Math.floor(pt[0] / this.colWidthPlusGap);
         const y = Math.floor((pt[1] + this._scroll) / this.rowHeight);
         return { x, y };
@@ -159,25 +159,25 @@ export class CollectionGridView extends CollectionSubView() {
         const xypos = this.flexGrid ? layout : this.unflexedPosition(this.renderedLayoutList.findIndex(l => l.i === layout.i));
         const pos = { x: xypos.x * this.colWidthPlusGap + this.margin, y: xypos.y * this.rowHeightPlusGap + this.margin - this._scroll };
 
-        return this.props.ScreenToLocalTransform().translate(-pos.x, -pos.y);
+        return this._props.ScreenToLocalTransform().translate(-pos.x, -pos.y);
     };
 
     /**
      * @returns the layout list converted from JSON
      */
     get savedLayoutList() {
-        return (this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []) as Layout[];
+        return (this.Document.gridLayoutString ? JSON.parse(StrCast(this.Document.gridLayoutString)) : []) as Layout[];
     }
 
     /**
      * Stores the layout list on the Document as JSON
      */
     setLayoutList(layouts: Layout[]) {
-        this.props.Document.gridLayoutString = JSON.stringify(layouts);
+        this.Document.gridLayoutString = JSON.stringify(layouts);
     }
 
-    isContentActive = () => this.props.isSelected() || this.props.isContentActive();
-    isChildContentActive = () => (this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) ? true : undefined);
+    isContentActive = () => this._props.isSelected() || this._props.isContentActive();
+    isChildContentActive = () => (this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) ? true : undefined);
     /**
      *
      * @param layout
@@ -199,9 +199,9 @@ export class CollectionGridView extends CollectionSubView() {
                 PanelWidth={width}
                 PanelHeight={height}
                 ScreenToLocalTransform={dxf}
-                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
+                whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
                 onClick={this.onChildClickHandler}
-                renderDepth={this.props.renderDepth + 1}
+                renderDepth={this._props.renderDepth + 1}
                 dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy'
             />
         );
@@ -222,12 +222,12 @@ export class CollectionGridView extends CollectionSubView() {
                 if (gridLayout) Object.assign(gridLayout, layoutArray.find(layout => layout.i === doc[Id]) || gridLayout);
             });
 
-            if (this.props.Document.gridStartCompaction) {
+            if (this.Document.gridStartCompaction) {
                 undoBatch(() => {
-                    this.props.Document.gridCompaction = this.props.Document.gridStartCompaction;
+                    this.Document.gridCompaction = this.Document.gridStartCompaction;
                     this.setLayoutList(savedLayouts);
                 })();
-                this.props.Document.gridStartCompaction = undefined;
+                this.Document.gridStartCompaction = undefined;
             } else {
                 undoBatch(() => this.setLayoutList(savedLayouts))();
             }
@@ -249,7 +249,7 @@ export class CollectionGridView extends CollectionSubView() {
                 const height = () => (this.flexGrid ? l.h : this.defaultH) * this.rowHeightPlusGap - this.margin;
                 child &&
                     collector.push(
-                        <div key={child.layout[Id]} className={'document-wrapper' + (this.flexGrid && this.props.isSelected() ? '' : ' static')}>
+                        <div key={child.layout[Id]} className={'document-wrapper' + (this.flexGrid && this._props.isSelected() ? '' : ' static')}>
                             {this.getDisplayDoc(child.layout, dxf, width, height)}
                         </div>
                     );
@@ -317,7 +317,7 @@ export class CollectionGridView extends CollectionSubView() {
             e,
             returnFalse,
             action(() => {
-                undoBatch(() => (this.props.Document.gridRowHeight = this._rowHeight))();
+                undoBatch(() => (this.Document.gridRowHeight = this._rowHeight))();
                 this._rowHeight = undefined;
             }),
             emptyFunction,
@@ -331,8 +331,8 @@ export class CollectionGridView extends CollectionSubView() {
      */
     onContextMenu = () => {
         const displayOptionsMenu: ContextMenuProps[] = [];
-        displayOptionsMenu.push({ description: 'Toggle Content Display Style', event: () => (this.props.Document.display = this.props.Document.display ? undefined : 'contents'), icon: 'copy' });
-        displayOptionsMenu.push({ description: 'Toggle Vertical Centering', event: () => (this.props.Document.centerY = !this.props.Document.centerY), icon: 'copy' });
+        displayOptionsMenu.push({ description: 'Toggle Content Display Style', event: () => (this.Document.display = this.Document.display ? undefined : 'contents'), icon: 'copy' });
+        displayOptionsMenu.push({ description: 'Toggle Vertical Centering', event: () => (this.Document.centerY = !this.Document.centerY), icon: 'copy' });
         ContextMenu.Instance.addItem({ description: 'Display', subitems: displayOptionsMenu, icon: 'tv' });
     };
 
@@ -340,7 +340,7 @@ export class CollectionGridView extends CollectionSubView() {
      * Handles text document creation on double click.
      */
     onPointerDown = (e: React.PointerEvent) => {
-        if (this.props.isContentActive(true)) {
+        if (this._props.isContentActive(true)) {
             setupMoveUpEvents(
                 this,
                 e,
@@ -352,7 +352,7 @@ export class CollectionGridView extends CollectionSubView() {
                             action(() => {
                                 const text = Docs.Create.TextDocument('', { _width: 150, _height: 50 });
                                 FormattedTextBox.SetSelectOnLoad(text); // track the new text box so we can give it a prop that tells it to focus itself when it's displayed
-                                Doc.AddDocToList(this.props.Document, this.props.fieldKey, text);
+                                Doc.AddDocToList(this.Document, this._props.fieldKey, text);
                                 this.setLayoutList(this.addLayoutItem(this.savedLayoutList, this.makeLayoutItem(text, this.screenToCell(e.clientX, e.clientY))));
                             })
                         )();
@@ -360,7 +360,7 @@ export class CollectionGridView extends CollectionSubView() {
                 },
                 false
             );
-            if (this.props.isSelected()) e.stopPropagation();
+            if (this._props.isSelected()) e.stopPropagation();
         }
     };
 
@@ -369,7 +369,7 @@ export class CollectionGridView extends CollectionSubView() {
             <div
                 className="collectionGridView-contents"
                 ref={this.createDashEventsTarget}
-                style={{ pointerEvents: !this.props.isContentActive() ? 'none' : undefined }}
+                style={{ pointerEvents: !this._props.isContentActive() ? 'none' : undefined }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}
                 onDrop={this.onExternalDrop}>
@@ -379,29 +379,29 @@ export class CollectionGridView extends CollectionSubView() {
                     style={{ backgroundColor: StrCast(this.layoutDoc._backgroundColor, 'white') }}
                     onWheel={e => e.stopPropagation()}
                     onScroll={action(e => {
-                        if (!this.props.isSelected()) e.currentTarget.scrollTop = this._scroll;
+                        if (!this._props.isSelected()) e.currentTarget.scrollTop = this._scroll;
                         else this._scroll = e.currentTarget.scrollTop;
                     })}>
                     <Grid
-                        width={this.props.PanelWidth()}
+                        width={this._props.PanelWidth()}
                         nodeList={this.contents.length ? this.contents : null}
                         layout={this.contents.length ? this.renderedLayoutList : undefined}
-                        childrenDraggable={this.props.isSelected() ? true : false}
+                        childrenDraggable={this._props.isSelected() ? true : false}
                         numCols={this.numCols}
                         rowHeight={this.rowHeight}
                         setLayout={this.setLayout}
-                        transformScale={this.props.ScreenToLocalTransform().Scale}
+                        transformScale={this._props.ScreenToLocalTransform().Scale}
                         compactType={this.compaction} // determines whether nodes should remain in position, be bound to the top, or to the left
-                        preventCollision={BoolCast(this.props.Document.gridPreventCollision)} // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them
+                        preventCollision={BoolCast(this.Document.gridPreventCollision)} // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them
                         margin={this.margin}
                     />
                     <input
                         className="rowHeightSlider"
                         type="range"
-                        style={{ width: this.props.PanelHeight() - 30 }}
+                        style={{ width: this._props.PanelHeight() - 30 }}
                         min={1}
                         value={this.rowHeight}
-                        max={this.props.PanelHeight() - 30}
+                        max={this._props.PanelHeight() - 30}
                         onPointerDown={this.onSliderDown}
                         onChange={this.onSliderChange}
                     />
diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
index ea99bff2e..c38c6dc4e 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
@@ -18,12 +18,8 @@ interface ResizerProps {
     select: (isCtrlPressed: boolean) => void;
 }
 
-const resizerOpacity = 1;
-
 @observer
 export default class ResizeBar extends React.Component<ResizerProps> {
-    @observable private isHoverActive = false;
-    @observable private isResizingActive = false;
     private _resizeUndo?: UndoManager.Batch;
 
     @action
@@ -35,7 +31,6 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         window.removeEventListener('pointerup', this.onPointerUp);
         window.addEventListener('pointermove', this.onPointerMove);
         window.addEventListener('pointerup', this.onPointerUp);
-        this.isResizingActive = true;
         this._resizeUndo = UndoManager.StartBatch('multcol resizing');
     };
 
@@ -80,8 +75,6 @@ export default class ResizeBar extends React.Component<ResizerProps> {
 
     @action
     private onPointerUp = () => {
-        this.isResizingActive = false;
-        this.isHoverActive = false;
         window.removeEventListener('pointermove', this.onPointerMove);
         window.removeEventListener('pointerup', this.onPointerUp);
         this._resizeUndo?.end();
@@ -96,9 +89,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                     pointerEvents: this.props.isContentActive?.() ? 'all' : 'none',
                     width: this.props.width,
                     backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor),
-                }}
-                onPointerEnter={action(() => (this.isHoverActive = true))}
-                onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}>
+                }}>
                 <div className={'multiColumnResizer-hdl'} onPointerDown={e => this.registerResizing(e)} />
             </div>
         );
diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
index 7dee65e58..6f1b3b425 100644
--- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
@@ -17,12 +17,8 @@ interface ResizerProps {
     toBottom?: Doc;
 }
 
-const resizerOpacity = 1;
-
 @observer
 export default class ResizeBar extends React.Component<ResizerProps> {
-    @observable private isHoverActive = false;
-    @observable private isResizingActive = false;
     private _resizeUndo?: UndoManager.Batch;
 
     @action
@@ -33,7 +29,6 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         window.removeEventListener('pointerup', this.onPointerUp);
         window.addEventListener('pointermove', this.onPointerMove);
         window.addEventListener('pointerup', this.onPointerUp);
-        this.isResizingActive = true;
         this._resizeUndo = UndoManager.StartBatch('multcol resizing');
     };
 
@@ -78,8 +73,6 @@ export default class ResizeBar extends React.Component<ResizerProps> {
 
     @action
     private onPointerUp = () => {
-        this.isResizingActive = false;
-        this.isHoverActive = false;
         window.removeEventListener('pointermove', this.onPointerMove);
         window.removeEventListener('pointerup', this.onPointerUp);
         this._resizeUndo?.end();
@@ -94,9 +87,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                     pointerEvents: this.props.isContentActive?.() ? 'all' : 'none',
                     height: this.props.height,
                     backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor),
-                }}
-                onPointerEnter={action(() => (this.isHoverActive = true))}
-                onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}>
+                }}>
                 <div className={'multiRowResizer-hdl'} onPointerDown={e => this.registerResizing(e)} />
             </div>
         );