restructured marquee and preview cursor to not need reactions. fixed some inking bugs.

1 files changed, 45 insertions, 26 deletions

diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
index 95364f04b..339e056a8 100644
--- a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
+++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
@@ -1,7 +1,6 @@
-import { action, IReactionDisposer, observable, reaction } from "mobx";
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../../fields/Document";
-import { Opt } from "../../../../fields/Field";
 import { Documents } from "../../../documents/Documents";
 import { Transform } from "../../../util/Transform";
 import { CollectionFreeFormView } from "./CollectionFreeFormView";
@@ -11,43 +10,50 @@ import React = require("react");
 
 export interface PreviewCursorProps {
     getTransform: () => Transform;
+    getContainerTransform: () => Transform;
     container: CollectionFreeFormView;
     addLiveTextDocument: (doc: Document) => void;
 }
 
 @observer
 export class PreviewCursor extends React.Component<PreviewCursorProps>  {
-    private _reactionDisposer: Opt<IReactionDisposer>;
-
     @observable _lastX: number = 0;
     @observable _lastY: number = 0;
+    @observable public _visible: boolean = false;
+    @observable public DownX: number = 0;
+    @observable public DownY: number = 0;
+    _showOnUp: boolean = false;
+    public _previewDivRef = React.createRef<HTMLDivElement>();
 
-    componentDidMount() {
-        this._reactionDisposer = reaction(
-            () => this.props.container.PreviewCursorVisible,
-            (visible: boolean) => this.onCursorPlaced(visible, this.props.container.DownX, this.props.container.DownY))
-    }
-    componentWillUnmount() {
-        if (this._reactionDisposer) {
-            this._reactionDisposer();
-        }
-        this.cleanupInteractions();
+    @action
+    cleanupInteractions = () => {
+        document.removeEventListener("pointerup", this.onPointerUp, true);
     }
 
-
     @action
-    cleanupInteractions = () => {
+    onPointerDown = (e: React.PointerEvent) => {
+        this._visible = false;
         document.removeEventListener("keypress", this.onKeyPress, false);
+        this._showOnUp = true;
+        this._lastX = this.DownX = e.pageX;
+        this._lastY = this.DownY = e.pageY;
+        document.addEventListener("pointerup", this.onPointerUp, true);
+        document.addEventListener("pointermove", this.onPointerMove, true);
+    }
+    @action
+    onPointerMove = (e: PointerEvent): void => {
+        if (Math.abs(this.DownX - e.clientX) > 4 || Math.abs(this.DownY - e.clientY) > 4) {
+            this._showOnUp = false;
+        }
     }
 
     @action
-    onCursorPlaced = (visible: boolean, downX: number, downY: number): void => {
-        if (visible) {
+    onPointerUp = (e: PointerEvent): void => {
+        if (this._showOnUp) {
             document.addEventListener("keypress", this.onKeyPress, false);
-            this._lastX = downX;
-            this._lastY = downY;
-        } else
-            this.cleanupInteractions();
+            this._visible = true;
+        }
+        this.cleanupInteractions();
     }
 
     @action
@@ -61,16 +67,29 @@ export class PreviewCursor extends React.Component<PreviewCursorProps>  {
             let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY);
             let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "typed text" });
             this.props.addLiveTextDocument(newBox);
+            document.removeEventListener("keypress", this.onKeyPress, false);
+            this._visible = false;
             e.stopPropagation();
         }
     }
+    //when focus is lost, this will remove the preview cursor
+    @action
+    onBlur = (): void => {
+        this._visible = false;
+        document.removeEventListener("keypress", this.onKeyPress, false);
+    }
 
     render() {
         //get local position and place cursor there!
-        let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY);
+        let p = this.props.getContainerTransform().transformPoint(this._lastX, this._lastY);
+        if (this._visible && this._previewDivRef.current)
+            this._previewDivRef.current!.focus();
         return (
-            !this.props.container.PreviewCursorVisible ? (null) :
-                <div className="previewCursor" id="previewCursor" style={{ transform: `translate(${x}px, ${y}px)` }}>I</div>)
-
+            <div className="previewCursorView" tabIndex={0} ref={this._previewDivRef} onBlur={this.onBlur} onPointerDown={this.onPointerDown}>
+                {this.props.children}
+                {!this._visible ? (null) :
+                    <div className="previewCursor" id="previewCursor" style={{ transform: `translate(${p[0]}px, ${p[1]}px)` }}>I</div>}
+            </div>
+        )
     }
 }
\ No newline at end of file