From 30ccaf0152e83a5365322c7e933d5a2ed42254f8 Mon Sep 17 00:00:00 2001
From: Lucas Azzola <lucas.azzola@iress.com>
Date: Sun, 5 Jan 2020 14:33:21 +1100
Subject: [PATCH] Set the cursor to 'crosshair' when expected to draw (#142)

* Set the cursor to 'crosshair' when expected to draw

And reset it back to default on mouse up.

Fixes #102

* Also reset cursor on text selection

* Use 'text' cursor for text
---
 src/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index e2d2243c..7cb0af48 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -692,6 +692,10 @@ function clearSelection() {
   });
 }
 
+function resetCursor() {
+  document.documentElement.style.cursor = "";
+}
+
 function deleteSelectedElements() {
   for (let i = elements.length - 1; i >= 0; --i) {
     if (elements[i].isSelected) {
@@ -1042,6 +1046,8 @@ class App extends React.Component<{}, AppState> {
                   onChange={() => {
                     this.setState({ elementType: value });
                     clearSelection();
+                    document.documentElement.style.cursor =
+                      value === "text" ? "text" : "crosshair";
                     this.forceUpdate();
                   }}
                 />
@@ -1189,7 +1195,6 @@ class App extends React.Component<{}, AppState> {
             let resizeHandle: string | false = false;
             let isDraggingElements = false;
             let isResizingElements = false;
-            const cursorStyle = document.documentElement.style.cursor;
             if (this.state.elementType === "selection") {
               const resizeElement = elements.find(element => {
                 return resizeTest(element, x, y, {
@@ -1248,6 +1253,7 @@ class App extends React.Component<{}, AppState> {
             }
 
             if (isTextElement(element)) {
+              resetCursor();
               const text = prompt("What text do you want?");
               if (text === null) {
                 return;
@@ -1410,7 +1416,7 @@ class App extends React.Component<{}, AppState> {
               window.removeEventListener("mousemove", onMouseMove);
               window.removeEventListener("mouseup", onMouseUp);
 
-              document.documentElement.style.cursor = cursorStyle;
+              resetCursor();
 
               // if no element is clicked, clear the selection and redraw
               if (draggingElement === null) {