added blinking preview text cursor on click

5 files changed, 82 insertions, 6 deletions

diff --git a/src/PreviewTextCursor.tsx b/src/PreviewTextCursor.tsx
new file mode 100644
index 000000000..6818bf28c
--- /dev/null
+++ b/src/PreviewTextCursor.tsx
@@ -0,0 +1,15 @@
+import React = require("react");
+import { observer } from "mobx-react";
+
+@observer
+export class PreviewTextCursor extends React.Component {
+
+    render() {
+        return (
+            <div>
+
+            </div>
+        )
+    };
+
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index e9d134e7b..78d332322 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -17,4 +17,15 @@
     box-sizing: border-box;
     width: 100%;
     height: 100%;
+}
+
+//this is an animation for the blinking cursor!
+@keyframes blink {
+	0% {opacity: 0}
+	49%{opacity: 0}
+	50% {opacity: 1}
+}
+
+#prevCursor {
+    animation: blink 1s infinite;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 9cf8f2e35..1393557cd 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -13,6 +13,8 @@ import { ListField } from "../../../fields/ListField";
 import { NumberField } from "../../../fields/NumberField";
 import { Documents } from "../../documents/Documents";
 import { FieldWaiting } from "../../../fields/Field";
+import { Server } from "tls";
+var FontAwesomeIcon = require('react-fontawesome');
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
@@ -24,6 +26,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
     private _lastY: number = 0;
     private _downX: number = 0;
     private _downY: number = 0;
+    //determines whether the blinking cursor for indicating whether a text will be made on key down is visible
+    private _previewCursorVisible: boolean = false;
 
     constructor(props: CollectionViewProps) {
         super(props);
@@ -81,10 +85,19 @@ export class CollectionFreeFormView extends CollectionViewBase {
             !e.defaultPrevented) {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
+            //document.removeEventListener("keypress", this.onKeyDown);
+            //document.addEventListener("keydown", this.onKeyDown);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
-            this._downX = this._lastX = e.pageX;
-            this._downY = this._lastY = e.pageY;
+            this._lastX = e.pageX;
+            this._lastY = e.pageY;
+            this._downX = e.pageX;
+            this._downY = e.pageY;
+            //update downX/downY to update UI (used for preview text cursor)
+            this.setState({
+                DownX: e.pageX,
+                DownY: e.pageY,
+            })
         }
     }
 
@@ -94,10 +107,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
         document.removeEventListener("pointerup", this.onPointerUp);
         e.stopPropagation();
         if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
+            this._previewCursorVisible = true;
             if (!SelectionManager.IsSelected(this.props.ContainingDocumentView as CollectionFreeFormDocumentView)) {
                 SelectionManager.SelectDoc(this.props.ContainingDocumentView as CollectionFreeFormDocumentView, false);
             }
         }
+
     }
 
     @action
@@ -110,6 +125,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
             let y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
 
             this.SetPan(x + (e.pageX - this._lastX) / currScale, y + (e.pageY - this._lastY) / currScale);
+            console.log("SET PAN");
         }
         this._lastX = e.pageX;
         this._lastY = e.pageY;
@@ -174,6 +190,20 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     @action
+    onKeyDown = (e: React.KeyboardEvent<Element>) => {
+        console.log("KEY PRESSED");
+        //if not these keys, make a textbox if preview cursor is active!
+        if (!e.ctrlKey && !e.altKey && !e.shiftKey) {
+            if (this._previewCursorVisible) {
+                //make textbox
+                let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
+                let newBox = Documents.TextDocument({ width: 200, height: 100, x: LocalX, y: LocalY, title: "new" });
+                this.addDocument(newBox);
+            }
+        }
+    }
+
+    @action
     bringToFront(doc: CollectionFreeFormDocumentView) {
         const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
 
@@ -197,21 +227,36 @@ export class CollectionFreeFormView extends CollectionViewBase {
         const panx: number = Document.GetNumber(KeyStore.PanX, 0);
         const pany: number = Document.GetNumber(KeyStore.PanY, 0);
 
+        let cursor = null;
+        //toggle for preview cursor -> will be on when user taps freeform
+        if (this._previewCursorVisible) {
+            //get local position and place cursor there!
+            let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
+            cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", transform: `translate(${LocalX}px, ${LocalY}px)` }}>I</div>
+        }
+
+
+
         return (
             <div className="border" style={{
-                borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
+                borderWidth: `${COLLECTION_BORDER_WIDTH} px`,
             }}>
-                <div className="collectionfreeformview-container"
+                <div
+                    className="collectionfreeformview-container"
                     onPointerDown={this.onPointerDown}
                     onWheel={this.onPointerWheel}
                     onContextMenu={(e) => e.preventDefault()}
                     onDrop={this.onDrop}
                     onDragOver={this.onDragOver}
+                    onKeyPress={this.onKeyDown}
                     ref={this._containerRef}>
                     <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
+                        {this.props.BackgroundView}
+                        <div className="node-container" ref={this._nodeContainerRef} onKeyPress={this.onKeyDown}>
+
+
+                            {cursor}
 
-                        <div className="node-container" ref={this._nodeContainerRef}>
-                            {this.props.BackgroundView}
                             {value.map(doc => {
                                 return (<CollectionFreeFormDocumentView Scaling={this.resizeScaling} key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
                             })}
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index e854d3077..274f26ecc 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -17,6 +17,8 @@ export interface CollectionViewProps {
     DocumentForCollection: Document;
     ContainingDocumentView: Opt<DocumentView>;
     BackgroundView: Opt<DocumentView>;
+    DownX: number;
+    DownY: number;
 }
 
 export const COLLECTION_BORDER_WIDTH = 2;
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index a183db828..bb8dea53b 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -10,6 +10,7 @@ import { ContextMenu } from "../ContextMenu";
 import "./NodeView.scss";
 import React = require("react");
 import { DocumentView, DocumentViewProps } from "./DocumentView";
+var FontAwesomeIcon = require('react-fontawesome');
 
 
 @observer
@@ -17,6 +18,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
     private _contextMenuCanOpen = false;
     private _downX: number = 0;
     private _downY: number = 0;
+    //determines whether the blinking cursor for indicating whether a text will be made on key down is visible
 
     constructor(props: DocumentViewProps) {
         super(props);
@@ -205,6 +207,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
 
     render() {
         var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
+
         return (
             <div className="node" ref={this._mainCont} style={{
                 transformOrigin: "left top",