Merge branch 'master' into sophie-ai-images

1 files changed, 82 insertions, 88 deletions

diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index c174befc0..20dc6c9fa 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 { Doc, DocListCast } from '../../fields/Doc';
+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,19 +107,19 @@ 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(
                 action((entries: any) => {
                     for (const entry of entries) {
-                        DocListCast(Doc.MyOverlayDocs?.data).forEach(doc => {
+                        Doc.MyOverlayDocs.forEach(doc => {
                             if (NumCast(doc.overlayX) > entry.contentRect.width - 10) {
                                 doc.overlayX = entry.contentRect.width - 10;
                             }
@@ -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
@@ -184,70 +183,66 @@ export class OverlayView extends React.Component {
     );
 
     @computed get overlayDocs() {
-        return DocListCast(Doc.MyOverlayDocs?.data)
-            .filter(d => !LightboxView.LightboxDoc || d.type === DocumentType.PRES)
-            .map(d => {
-                let offsetx = 0,
-                    offsety = 0;
-                const dref = React.createRef<HTMLDivElement>();
-                const onPointerMove = action((e: PointerEvent, down: number[]) => {
-                    if (e.cancelBubble) return false; // if the overlay doc processed the move event (e.g., to pan its contents), then the event should be marked as canceled since propagation can't be stopped
-                    if (e.buttons === 1) {
-                        d.overlayX = e.clientX + offsetx;
-                        d.overlayY = e.clientY + offsety;
-                    }
-                    if (e.metaKey) {
-                        const dragData = new DragManager.DocumentDragData([d]);
-                        dragData.offset = [-offsetx, -offsety];
-                        dragData.dropAction = 'move';
-                        dragData.removeDocument = this.removeOverlayDoc;
-                        dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
-                            return dragData.removeDocument!(doc) ? addDocument(doc) : false;
-                        };
-                        DragManager.StartDocumentDrag([dref.current!], dragData, down[0], down[1]);
-                        return true;
-                    }
-                    return false;
-                });
-
-                const onPointerDown = (e: React.PointerEvent) => {
-                    setupMoveUpEvents(this, e, onPointerMove, emptyFunction, emptyFunction, false);
-                    offsetx = NumCast(d.overlayX) - e.clientX;
-                    offsety = NumCast(d.overlayY) - e.clientY;
-                };
-                return (
-                    <div
-                        className="overlayView-doc"
-                        ref={dref}
-                        key={d[Id]}
-                        onPointerDown={onPointerDown}
-                        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}
-                            PanelWidth={d[Width]}
-                            PanelHeight={d[Height]}
-                            ScreenToLocalTransform={this.docScreenToLocalXf(d)}
-                            renderDepth={1}
-                            hideDecorations={true}
-                            isDocumentActive={returnTrue}
-                            isContentActive={returnTrue}
-                            whenChildContentsActiveChanged={emptyFunction}
-                            focus={emptyFunction}
-                            styleProvider={DefaultStyleProvider}
-                            docViewPath={returnEmptyDoclist}
-                            addDocTab={DocumentViewInternal.addDocTabFunc}
-                            pinToPres={emptyFunction}
-                            childFilters={returnEmptyFilter}
-                            childFiltersByRanges={returnEmptyFilter}
-                            searchFilterDocs={returnEmptyDoclist}
-                        />
-                    </div>
-                );
+        return Doc.MyOverlayDocs.filter(d => !LightboxView.LightboxDoc || d.type === DocumentType.PRES).map(d => {
+            let offsetx = 0,
+                offsety = 0;
+            const dref = React.createRef<HTMLDivElement>();
+            const onPointerMove = action((e: PointerEvent, down: number[]) => {
+                if (e.cancelBubble) return false; // if the overlay doc processed the move event (e.g., to pan its contents), then the event should be marked as canceled since propagation can't be stopped
+                if (e.buttons === 1) {
+                    d.overlayX = e.clientX + offsetx;
+                    d.overlayY = e.clientY + offsety;
+                }
+                if (e.metaKey) {
+                    const dragData = new DragManager.DocumentDragData([d]);
+                    dragData.offset = [-offsetx, -offsety];
+                    dragData.dropAction = 'move';
+                    dragData.removeDocument = this.removeOverlayDoc;
+                    dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
+                        return dragData.removeDocument!(doc) ? addDocument(doc) : false;
+                    };
+                    DragManager.StartDocumentDrag([dref.current!], dragData, down[0], down[1]);
+                    return true;
+                }
+                return false;
             });
+
+            const onPointerDown = (e: React.PointerEvent) => {
+                setupMoveUpEvents(this, e, onPointerMove, emptyFunction, emptyFunction, false);
+                offsetx = NumCast(d.overlayX) - e.clientX;
+                offsety = NumCast(d.overlayY) - e.clientY;
+            };
+            return (
+                <div
+                    className="overlayView-doc"
+                    ref={dref}
+                    key={d[Id]}
+                    onPointerDown={onPointerDown}
+                    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}
+                        addDocument={undefined}
+                        removeDocument={this.removeOverlayDoc}
+                        PanelWidth={d[Width]}
+                        PanelHeight={d[Height]}
+                        ScreenToLocalTransform={this.docScreenToLocalXf(d)}
+                        renderDepth={1}
+                        hideDecorations={true}
+                        isDocumentActive={returnTrue}
+                        isContentActive={returnTrue}
+                        whenChildContentsActiveChanged={emptyFunction}
+                        focus={emptyFunction}
+                        styleProvider={DefaultStyleProvider}
+                        containerViewPath={returnEmptyDoclist}
+                        addDocTab={DocumentViewInternal.addDocTabFunc}
+                        pinToPres={emptyFunction}
+                        childFilters={returnEmptyFilter}
+                        childFiltersByRanges={returnEmptyFilter}
+                        searchFilterDocs={returnEmptyDoclist}
+                    />
+                </div>
+            );
+        });
     }
 
     public static ShowSpinner() {
@@ -258,7 +253,6 @@ export class OverlayView extends React.Component {
         return (
             <div className="overlayView" id="overlayView">
                 <div>{this._elements}</div>
-                <CollectionFreeFormLinksView key="freeformLinks" />
                 {this.overlayDocs}
             </div>
         );