1 files changed, 55 insertions, 22 deletions
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 8d80ad1f1..bc02a49c6 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { observer } from "mobx-react";
 import { observable, action } from "mobx";
-import { Utils, emptyFunction, returnOne, returnTrue, returnEmptyString } from "../../Utils";
+import { Utils, emptyFunction, returnOne, returnTrue, returnEmptyString, returnZero, returnFalse } from "../../Utils";
 
 import './OverlayView.scss';
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
@@ -10,6 +10,8 @@ import { Id } from "../../new_fields/FieldSymbols";
 import { DocumentView } from "./nodes/DocumentView";
 import { Transform } from "../util/Transform";
 import { CollectionFreeFormDocumentView } from "./nodes/CollectionFreeFormDocumentView";
+import { DocumentContentsView } from "./nodes/DocumentContentsView";
+import { NumCast } from "../../new_fields/Types";
 
 export type OverlayDisposer = () => void;
 
@@ -142,27 +144,58 @@ export class OverlayView extends React.Component {
         return (
             <div className="overlayView" id="overlayView">
                 {this._elements}
-                {CurrentUserUtils.UserDocument.overlays instanceof Doc && DocListCast(CurrentUserUtils.UserDocument.overlays.data).map(d => (
-                    <CollectionFreeFormDocumentView key={d[Id]}
-                        Document={d}
-                        bringToFront={emptyFunction}
-                        addDocument={undefined}
-                        removeDocument={undefined}
-                        ContentScaling={returnOne}
-                        PanelWidth={returnOne}
-                        PanelHeight={returnOne}
-                        ScreenToLocalTransform={Transform.Identity}
-                        renderDepth={1}
-                        selectOnLoad={false}
-                        parentActive={returnTrue}
-                        whenActiveChanged={emptyFunction}
-                        focus={emptyFunction}
-                        backgroundColor={returnEmptyString}
-                        addDocTab={emptyFunction}
-                        pinToPres={emptyFunction}
-                        ContainingCollectionView={undefined}
-                        zoomToScale={emptyFunction}
-                        getScale={returnOne} />))}
+                {CurrentUserUtils.UserDocument.overlays instanceof Doc && DocListCast(CurrentUserUtils.UserDocument.overlays.data).map(d => {
+                    let offsetx = 0, offsety = 0;
+                    let onPointerMove = action((e: PointerEvent) => {
+                        if (e.buttons === 1) {
+                            d.x = e.clientX + offsetx;
+                            d.y = e.clientY + offsety;
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }
+                    });
+                    let onPointerUp = action((e: PointerEvent) => {
+                        document.removeEventListener("pointermove", onPointerMove);
+                        document.removeEventListener("pointerup", onPointerUp);
+                        e.stopPropagation();
+                        e.preventDefault();
+                    });
+
+                    let onPointerDown = (e: React.PointerEvent) => {
+                        offsetx = NumCast(d.x) - e.clientX;
+                        offsety = NumCast(d.y) - e.clientY;
+                        e.stopPropagation();
+                        e.preventDefault();
+                        document.addEventListener("pointermove", onPointerMove);
+                        document.addEventListener("pointerup", onPointerUp);
+                    }
+                    return <div className="overlayView-doc" key={d[Id]} onPointerDown={onPointerDown} style={{ transform: `translate(${d.x}px, ${d.y}px)` }}>
+                        <DocumentContentsView
+                            Document={d}
+                            ChromeHeight={returnZero}
+                            isSelected={returnFalse}
+                            select={emptyFunction}
+                            layoutKey={"layout"}
+                            bringToFront={emptyFunction}
+                            addDocument={undefined}
+                            removeDocument={undefined}
+                            ContentScaling={returnOne}
+                            PanelWidth={returnOne}
+                            PanelHeight={returnOne}
+                            ScreenToLocalTransform={Transform.Identity}
+                            renderDepth={1}
+                            selectOnLoad={false}
+                            parentActive={returnTrue}
+                            whenActiveChanged={emptyFunction}
+                            focus={emptyFunction}
+                            backgroundColor={returnEmptyString}
+                            addDocTab={emptyFunction}
+                            pinToPres={emptyFunction}
+                            ContainingCollectionView={undefined}
+                            zoomToScale={emptyFunction}
+                            getScale={returnOne} />
+                    </div>
+                })}
             </div>
         );
     }