fixed overlay view and scriptingRepl and all observable Doc arrays to be shallowly observed.

1 files changed, 21 insertions, 15 deletions

diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index dd547c549..e41113ca4 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -1,21 +1,20 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable, toJS } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
+import { Utils, copyProps, 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, returnFalse, 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 './OverlayView.scss';
 import { DefaultStyleProvider } from './StyleProvider';
+import { DocumentView, DocumentViewInternal } from './nodes/DocumentView';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 export type OverlayDisposer = () => void;
@@ -36,12 +35,17 @@ export interface OverlayWindowProps {
 
 @observer
 export class OverlayWindow extends React.Component<OverlayWindowProps> {
-    @observable x: number;
-    @observable y: number;
-    @observable width: number;
-    @observable height: number;
+    @observable x: number = 0;
+    @observable y: number = 0;
+    @observable width: number = 0;
+    @observable height: number = 0;
+
+    _prevProps: OverlayWindowProps;
+    @observable _props: OverlayWindowProps;
     constructor(props: OverlayWindowProps) {
         super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
 
         const opts = props.overlayOptions;
         this.x = opts.x;
@@ -50,6 +54,10 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> {
         this.height = opts.height || 200;
     }
 
+    componentDidUpdate() {
+        copyProps(this);
+    }
+
     onPointerDown = (_: React.PointerEvent) => {
         document.removeEventListener('pointermove', this.onPointerMove);
         document.removeEventListener('pointerup', this.onPointerUp);
@@ -94,8 +102,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>
@@ -109,11 +117,11 @@ export class OverlayWindow extends React.Component<OverlayWindowProps> {
 @observer
 export class OverlayView extends React.Component {
     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(
@@ -139,7 +147,7 @@ export class OverlayView extends React.Component {
             const index = this._elements.indexOf(ele);
             if (index !== -1) this._elements.splice(index, 1);
         });
-        ele = (
+        this._elements.push(
             <div
                 key={Utils.GenerateGuid()}
                 className="overlayView-wrapperDiv"
@@ -153,7 +161,6 @@ export class OverlayView extends React.Component {
                 {ele}
             </div>
         );
-        this._elements.push(ele);
         return remove;
     }
 
@@ -255,7 +262,6 @@ export class OverlayView extends React.Component {
         return (
             <div className="overlayView" id="overlayView">
                 <div>{this._elements}</div>
-                <CollectionFreeFormLinksView key="freeformLinks" />
                 {this.overlayDocs}
             </div>
         );