moved previewcursor to main

3 files changed, 44 insertions, 43 deletions

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 419de6fc1..ac00be63c 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -40,7 +40,43 @@ import { DocumentView } from './nodes/DocumentView';
 import { FormattedTextBox } from './nodes/FormattedTextBox';
 import { REPLCommand } from 'repl';
 import { Key } from '../../fields/Key';
+import { truncate } from 'fs';
 
+
+export interface PromptProps {
+}
+
+@observer
+export class PreviewCursorPrompt extends React.Component<PromptProps> {
+    private _prompt = React.createRef<HTMLDivElement>();
+    //when focus is lost, this will remove the preview cursor
+    @action onBlur = (): void => {
+        PreviewCursorPrompt.Visible = false;
+        PreviewCursorPrompt.hide();
+    }
+
+    @observable static clickPoint = [0, 0];
+    @observable public static Visible = false;
+    @observable public static hide = () => { };
+    @action
+    public static Show(hide: any, x: number, y: number) {
+        this.clickPoint = [x, y];
+        this.hide = hide;
+        setTimeout(action(() => this.Visible = true), (1));
+    }
+    render() {
+        if (!PreviewCursorPrompt.clickPoint)
+            return (null);
+        if (PreviewCursorPrompt.Visible && this._prompt.current) {
+            this._prompt.current.focus();
+        }
+        let p = PreviewCursorPrompt.clickPoint;
+        return <div className="previewCursor" id="previewCursor" onBlur={this.onBlur} tabIndex={0} ref={this._prompt}
+            style={{ transform: `translate(${p[0]}px, ${p[1]}px)`, opacity: PreviewCursorPrompt.Visible ? 1 : 0 }}>
+            I
+        </div >;
+    }
+}
 @observer
 export class Main extends React.Component {
     // dummy initializations keep the compiler happy
@@ -392,6 +428,7 @@ export class Main extends React.Component {
                         {({ measureRef }) =>
                             <div ref={measureRef} id="mainContent-div">
                                 {this.mainContent}
+                                <PreviewCursorPrompt />
                             </div>
                         }
                     </Measure>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e38e71a68..dae62f126 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -325,8 +325,7 @@ export class CollectionFreeFormView extends CollectionSubView {
                             <MarqueeView container={this} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments}
                                 addDocument={this.addDocument} removeDocument={this.props.removeDocument}
                                 getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}>
-                                <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox}
-                                    getContainerTransform={this.getContainerTransform} getTransform={this.getTransform} >
+                                <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox} getTransform={this.getTransform} >
                                     <div className="collectionfreeformview" ref={this._canvasRef}
                                         style={{ transform: `translate(${dx}px, ${dy}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}>
                                         {blay}
diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
index 8eabb020a..64da8ecc6 100644
--- a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
+++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
@@ -6,12 +6,11 @@ import { Transform } from "../../../util/Transform";
 import { CollectionFreeFormView } from "./CollectionFreeFormView";
 import "./PreviewCursor.scss";
 import React = require("react");
-import { interfaceDeclaration } from "babel-types";
+import { Main, PreviewCursorPrompt } from "../../Main";
 
 
 export interface PreviewCursorProps {
     getTransform: () => Transform;
-    getContainerTransform: () => Transform;
     container: CollectionFreeFormView;
     addLiveTextDocument: (doc: Document) => void;
 }
@@ -20,7 +19,6 @@ export interface PreviewCursorProps {
 export class PreviewCursor extends React.Component<PreviewCursorProps>  {
     @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;
@@ -46,17 +44,14 @@ export class PreviewCursor extends React.Component<PreviewCursorProps>  {
     onPointerMove = (e: PointerEvent): void => {
         if (Math.abs(this.DownX - e.clientX) > 4 || Math.abs(this.DownY - e.clientY) > 4) {
             this._showOnUp = false;
-            this._visible = false;
+            PreviewCursorPrompt.Visible = false;
         }
     }
 
-    @action
     onPointerUp = (e: PointerEvent): void => {
         if (this._showOnUp) {
+            PreviewCursorPrompt.Show(this.hideCursor, this.DownX, this.DownY);
             document.addEventListener("keypress", this.onKeyPress, false);
-            this._lastX = this.DownX;
-            this._lastY = this.DownY;
-            this._visible = true;
         }
         this.cleanupInteractions();
     }
@@ -69,52 +64,22 @@ export class PreviewCursor extends React.Component<PreviewCursorProps>  {
         //if not these keys, make a textbox if preview cursor is active!
         if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
             //make textbox and add it to this collection
-            let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY);
+            let [x, y] = this.props.getTransform().transformPoint(this.DownX, this.DownY);
             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;
+            PreviewCursorPrompt.Visible = false;
             e.stopPropagation();
         }
     }
 
-    getPoint = () => this.props.getContainerTransform().transformPoint(this._lastX, this._lastY);
-    getVisible = () => this._visible;
-    setVisible = (v: boolean) => {
-        this._visible = v;
+    hideCursor = () => {
         document.removeEventListener("keypress", this.onKeyPress, false);
     }
     render() {
         return (
             <div className="previewCursorView" onPointerDown={this.onPointerDown}>
                 {this.props.children}
-                <PreviewCursorPrompt setVisible={this.setVisible} getPoint={this.getPoint} getVisible={this.getVisible} />
             </div>
         );
     }
-}
-
-export interface PromptProps {
-    getPoint: () => number[];
-    getVisible: () => boolean;
-    setVisible: (v: boolean) => void;
-}
-
-@observer
-export class PreviewCursorPrompt extends React.Component<PromptProps> {
-    private _promptRef = React.createRef<HTMLDivElement>();
-
-    //when focus is lost, this will remove the preview cursor
-    @action onBlur = (): void => this.props.setVisible(false);
-
-    render() {
-        let p = this.props.getPoint();
-        if (this.props.getVisible() && this._promptRef.current) {
-            this._promptRef.current.focus();
-        }
-        return <div className="previewCursor" id="previewCursor" onBlur={this.onBlur} tabIndex={0} ref={this._promptRef}
-            style={{ transform: `translate(${p[0]}px, ${p[1]}px)`, opacity: this.props.getVisible() ? 1 : 0 }}>
-            I
-        </div >;
-    }
 }
\ No newline at end of file