1 files changed, 21 insertions, 24 deletions

diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index c7b59a8e2..915c3c18f 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -1,21 +1,21 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
+import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue, setupMoveUpEvents } from '../../Utils';
 import { Doc } from '../../fields/Doc';
 import { Height, Width } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { NumCast } from '../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue, setupMoveUpEvents, Utils } from '../../Utils';
 import { DocumentType } from '../documents/DocumentTypes';
 import { DragManager } from '../util/DragManager';
 import { Transform } from '../util/Transform';
-import { CollectionFreeFormLinksView } from './collections/collectionFreeForm/CollectionFreeFormLinksView';
 import { LightboxView } from './LightboxView';
-import { DocumentView, DocumentViewInternal } from './nodes/DocumentView';
+import { ObservableReactComponent } from './ObservableReactComponent';
 import './OverlayView.scss';
 import { DefaultStyleProvider } from './StyleProvider';
+import { DocumentView, DocumentViewInternal } from './nodes/DocumentView';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 export type OverlayDisposer = () => void;
@@ -35,14 +35,14 @@ export interface OverlayWindowProps {
 }
 
 @observer
-export class OverlayWindow extends React.Component<OverlayWindowProps> {
-    @observable x: number;
-    @observable y: number;
-    @observable width: number;
-    @observable height: number;
+export class OverlayWindow extends ObservableReactComponent<OverlayWindowProps> {
+    @observable x: number = 0;
+    @observable y: number = 0;
+    @observable width: number = 0;
+    @observable height: number = 0;
     constructor(props: OverlayWindowProps) {
         super(props);
-
+        makeObservable(this);
         const opts = props.overlayOptions;
         this.x = opts.x;
         this.y = opts.y;
@@ -94,8 +94,8 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> {
         return LightboxView.LightboxDoc ? null : (
             <div className="overlayWindow-outerDiv" style={{ transform: `translate(${this.x}px, ${this.y}px)`, width: this.width, height: this.height }}>
                 <div className="overlayWindow-titleBar" onPointerDown={this.onPointerDown}>
-                    {this.props.overlayOptions.title || 'Untitled'}
-                    <button onClick={this.props.onClick} className="overlayWindow-closeButton">
+                    {this._props.overlayOptions.title || 'Untitled'}
+                    <button onClick={this._props.onClick} className="overlayWindow-closeButton">
                         X
                     </button>
                 </div>
@@ -107,13 +107,13 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> {
 }
 
 @observer
-export class OverlayView extends React.Component {
+export class OverlayView extends ObservableReactComponent<{}> {
     public static Instance: OverlayView;
-    @observable.shallow
-    private _elements: JSX.Element[] = [];
+    @observable.shallow _elements: JSX.Element[] = [];
 
     constructor(props: any) {
         super(props);
+        makeObservable(this);
         if (!OverlayView.Instance) {
             OverlayView.Instance = this;
             new _global.ResizeObserver(
@@ -135,11 +135,7 @@ export class OverlayView extends React.Component {
 
     @action
     addElement(ele: JSX.Element, options: OverlayElementOptions): OverlayDisposer {
-        const remove = action(() => {
-            const index = this._elements.indexOf(ele);
-            if (index !== -1) this._elements.splice(index, 1);
-        });
-        ele = (
+        const div = (
             <div
                 key={Utils.GenerateGuid()}
                 className="overlayView-wrapperDiv"
@@ -153,8 +149,11 @@ export class OverlayView extends React.Component {
                 {ele}
             </div>
         );
-        this._elements.push(ele);
-        return remove;
+        this._elements.push(div);
+        return action(() => {
+            const index = this._elements.indexOf(div);
+            if (index !== -1) this._elements.splice(index, 1);
+        });
     }
 
     @action
@@ -222,7 +221,6 @@ export class OverlayView extends React.Component {
                     style={{ top: d.type === DocumentType.PRES ? 0 : undefined, width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.overlayX}px, ${d.overlayY}px)` }}>
                     <DocumentView
                         Document={d}
-                        rootSelected={returnTrue}
                         bringToFront={emptyFunction}
                         addDocument={undefined}
                         removeDocument={this.removeOverlayDoc}
@@ -256,7 +254,6 @@ export class OverlayView extends React.Component {
         return (
             <div className="overlayView" id="overlayView">
                 <div>{this._elements}</div>
-                <CollectionFreeFormLinksView key="freeformLinks" />
                 {this.overlayDocs}
             </div>
         );