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

10 files changed, 87 insertions, 43 deletions

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 17c915318..ba7a26a7a 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -22,8 +22,8 @@ const { Howl } = require('howler');
 export class DocumentManager {
     //global holds all of the nodes (regardless of which collection they're in)
     @observable _documentViews = new Set<DocumentView>();
-    @observable public LinkAnchorBoxViews: DocumentView[] = observable([]);
-    @observable public LinkedDocumentViews: { a: DocumentView; b: DocumentView; l: Doc }[] = observable([]);
+    @observable.shallow public LinkAnchorBoxViews: DocumentView[] = [];
+    @observable.shallow public LinkedDocumentViews: { a: DocumentView; b: DocumentView; l: Doc }[] = [];
     @computed public get DocumentViews() {
         return Array.from(this._documentViews).filter(view => !(view.ComponentView instanceof KeyValueBox) && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(view.docViewPath)));
     }
@@ -38,7 +38,7 @@ export class DocumentManager {
     public static get Instance(): DocumentManager {
         return this._instance || (this._instance = new this());
     }
-    @observable public CurrentlyLoading: Doc[] = observable([]); // this assignment doesn't work. the actual assignment happens in DocumentManager's constructor
+    @observable.shallow public CurrentlyLoading: Doc[] = []; // this assignment doesn't work. the actual assignment happens in DocumentManager's constructor
 
     //private constructor so no other class can create a nodemanager
     private constructor() {
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 8346949ba..cacfcf856 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -22,7 +22,7 @@ import { ScriptingGlobals } from './ScriptingGlobals';
  */
 export class LinkManager {
     @observable static _instance: LinkManager;
-    @observable userLinkDBs: Doc[] = observable([]);
+    @observable.shallow userLinkDBs: Doc[] = [];
     @observable public static currentLink: Opt<Doc>;
     @observable public static currentLinkAnchor: Opt<Doc>;
     public static get Instance() {
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index f0a5f9ed9..dbb994dbd 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -160,7 +160,7 @@ class ScriptingCompilerHost {
 export type Traverser = (node: ts.Node, indentation: string) => boolean | void;
 export type TraverserParam = Traverser | { onEnter: Traverser; onLeave: Traverser };
 export type Transformer = {
-    transformer: ts.TransformerFactory<ts.SourceFile>;
+    transformer: ts.TransformerFactory<ts.Node>;
     getVars?: () => { [name: string]: Field };
 };
 export interface ScriptOptions {
@@ -220,7 +220,7 @@ export function CompileScript(script: string, options: ScriptOptions = {}): Comp
             const printer = ts.createPrinter({
                 newLine: ts.NewLineKind.LineFeed,
             });
-            script = printer.printFile(transformed[0]);
+            script = printer.printFile(transformed[0].getSourceFile());
         }
         result.dispose();
     }
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index d36a360a1..b837cdd08 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -12,7 +12,7 @@ import { UndoManager } from './UndoManager';
 
 export namespace SelectionManager {
     class Manager {
-        @observable SelectedViews: DocumentView[] = observable([]);
+        @observable.shallow SelectedViews: DocumentView[] = [];
         @observable IsDragging: boolean = false;
         @observable SelectedSchemaDocument: Doc | undefined = undefined;
 
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 831925054..118a2c5f5 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -17,7 +17,7 @@ export class ContextMenu extends React.Component {
     private _defaultItem: ((name: string) => void) | undefined;
     private _onDisplay?: () => void = undefined;
 
-    @observable _items: ContextMenuProps[] = observable([]);
+    @observable.shallow _items: ContextMenuProps[] = [];
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
     @observable _display: boolean = false;
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>
         );
diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx
index 9966dbced..8251d20dc 100644
--- a/src/client/views/ScriptingRepl.tsx
+++ b/src/client/views/ScriptingRepl.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { DocumentManager } from '../util/DocumentManager';
@@ -10,24 +10,40 @@ import { undoable } from '../util/UndoManager';
 import { DocumentIconContainer } from './nodes/DocumentIcon';
 import { OverlayView } from './OverlayView';
 import './ScriptingRepl.scss';
+import { copyProps } from '../../Utils';
 
-@observer
-export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: () => void; value: { [key: string]: any }; name?: string }> {
+interface ReplProps {
+    scrollToBottom: () => void;
+    value: { [key: string]: any };
+    name?: string;
+}
+export class ScriptingObjectDisplay extends React.Component<ReplProps> {
     @observable collapsed = true;
 
+    _prevProps: ReplProps;
+    @observable _props: ReplProps;
+    constructor(props: ReplProps) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+    componentDidUpdate(): void {
+        copyProps(this);
+    }
+
     @action
     toggle = () => {
         this.collapsed = !this.collapsed;
-        this.props.scrollToBottom();
+        this._props.scrollToBottom();
     };
 
     render() {
-        const val = this.props.value;
+        const val = this._props.value;
         const proto = Object.getPrototypeOf(val);
         const name = (proto && proto.constructor && proto.constructor.name) || String(val);
-        const title = this.props.name ? (
+        const title = this._props.name ? (
             <>
-                <b>{this.props.name} : </b>
+                <b>{this._props.name} : </b>
                 {name}
             </>
         ) : (
@@ -53,7 +69,7 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: ()
                     </div>
                     <div className="scriptingObject-fields">
                         {Object.keys(val).map(key => (
-                            <ScriptingValueDisplay {...this.props} name={key} />
+                            <ScriptingValueDisplay {...this._props} name={key} />
                         ))}
                     </div>
                 </div>
@@ -62,17 +78,32 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: ()
     }
 }
 
+interface replValueProps {
+    scrollToBottom: () => void;
+    value: any;
+    name?: string;
+}
 @observer
-export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: () => void; value: any; name?: string }> {
+export class ScriptingValueDisplay extends React.Component<replValueProps> {
+    _prevProps: replValueProps;
+    @observable _props: replValueProps;
+    constructor(props: replValueProps) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+    componentDidUpdate() {
+        copyProps(this);
+    }
     render() {
-        const val = this.props.name ? this.props.value[this.props.name] : this.props.value;
+        const val = this._props.name ? this._props.value[this._props.name] : this._props.value;
         if (typeof val === 'object') {
-            return <ScriptingObjectDisplay scrollToBottom={this.props.scrollToBottom} value={val} name={this.props.name} />;
+            return <ScriptingObjectDisplay scrollToBottom={this._props.scrollToBottom} value={val} name={this._props.name} />;
         } else if (typeof val === 'function') {
             const name = '[Function]';
-            const title = this.props.name ? (
+            const title = this._props.name ? (
                 <>
-                    <b>{this.props.name} : </b>
+                    <b>{this._props.name} : </b>
                     {name}
                 </>
             ) : (
@@ -81,9 +112,9 @@ export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: ()
             return <div className="scriptingObject-leaf">{title}</div>;
         } else {
             const name = String(val);
-            const title = this.props.name ? (
+            const title = this._props.name ? (
                 <>
-                    <b>{this.props.name} : </b>
+                    <b>{this._props.name} : </b>
                     {name}
                 </>
             ) : (
@@ -96,6 +127,11 @@ export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: ()
 
 @observer
 export class ScriptingRepl extends React.Component {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @observable private commands: { command: string; result: any }[] = [];
     private commandsHistory: string[] = [];
 
@@ -136,7 +172,8 @@ export class ScriptingRepl extends React.Component {
                                     const m = parseInt(match[1]);
                                     usedDocuments.push(m);
                                 } else {
-                                    return ts.createPropertyAccess(ts.createIdentifier('args'), node);
+                                    return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('args'), node);
+                                    //  ts.createPropertyAccess(ts.createIdentifier('args'), node);
                                 }
                             }
                         }
@@ -156,7 +193,7 @@ export class ScriptingRepl extends React.Component {
             case 'Enter': {
                 e.stopPropagation();
                 const docGlobals: { [name: string]: any } = {};
-                DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.props.Document));
+                DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.Document));
                 const globals = ScriptingGlobals.makeMutableGlobalsCopy(docGlobals);
                 const script = CompileScript(this.commandString, { typecheck: false, addReturn: true, editable: true, params: { args: 'any' }, transformer: this.getTransformer(), globals });
                 if (!script.compiled) {
diff --git a/src/client/views/animationtimeline/Region.tsx b/src/client/views/animationtimeline/Region.tsx
index bc87dc94d..abbc8203d 100644
--- a/src/client/views/animationtimeline/Region.tsx
+++ b/src/client/views/animationtimeline/Region.tsx
@@ -31,11 +31,11 @@ export namespace RegionHelpers {
         let rightMost: RegionData | undefined = undefined;
         regions.forEach(region => {
             const neighbor = RegionData(region);
-            if (currentRegion.position! > neighbor.position) {
+            if (NumCast(currentRegion.position) > neighbor.position) {
                 if (!leftMost || neighbor.position > leftMost.position) {
                     leftMost = neighbor;
                 }
-            } else if (currentRegion.position! < neighbor.position) {
+            } else if (NumCast(currentRegion.position) < neighbor.position) {
                 if (!rightMost || neighbor.position < rightMost.position) {
                     rightMost = neighbor;
                 }
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index 0c780af2a..9ec4d8c13 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -16,6 +16,7 @@ interface DocumentIconProps {
     view: DocumentView;
     index: number;
 }
+@observer
 export class DocumentIcon extends React.Component<DocumentIconProps> {
     @observable _hovered = false;
     _prevProps: DocumentIconProps;
diff --git a/src/fields/RichTextUtils.ts b/src/fields/RichTextUtils.ts
index dfd02dbc0..b84a91709 100644
--- a/src/fields/RichTextUtils.ts
+++ b/src/fields/RichTextUtils.ts
@@ -15,7 +15,7 @@ import { Doc, Opt } from './Doc';
 import { Id } from './FieldSymbols';
 import { RichTextField } from './RichTextField';
 import { Cast, StrCast } from './Types';
-import Color = require('color');
+import * as Color from 'color';
 
 export namespace RichTextUtils {
     const delimiter = '\n';