From ab354dc06d059003a6a45c2f4f5e78871330ddac Mon Sep 17 00:00:00 2001
From: graphemecluster <graphemecluster@gmail.com>
Date: Wed, 14 Apr 2021 14:45:04 +0800
Subject: [PATCH] Make the cursor `crosshair` when the background is dragged
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

選択の際カーソルを `crosshair` にする
---
 src/App.css | 4 ++++
 src/App.tsx | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index e927f47..9939e2e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -20,3 +20,7 @@
   grid-column: 1/2;
   grid-row: 2/3;
 }
+
+.background-dragging, .background-dragging * {
+  cursor: crosshair !important;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 3d9d42b..996691c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 
 import GlyphArea from './components/GlyphArea';
 import EditorControls from './components/EditorControls';
@@ -6,6 +7,8 @@ import PartsSearch from './components/PartsSearch'
 import SubmitForm from './components/SubmitForm';
 import OptionModal from './components/OptionModal';
 
+import { AppState } from './reducers';
+
 import { useShortcuts } from './shortcuts';
 
 import './App.css';
@@ -13,9 +16,11 @@ import { useTranslation } from 'react-i18next';
 
 function App() {
   const { i18n } = useTranslation();
+  const areaSelectRect = useSelector((state: AppState) => state.areaSelectRect);
+  const freehandStroke = useSelector((state: AppState) => state.freehandStroke);
   useShortcuts();
   return (
-    <div className="App" lang={i18n.language}>
+    <div className={'App' + (areaSelectRect || freehandStroke ? ' background-dragging' : '')} lang={i18n.language}>
       <GlyphArea />
       <EditorControls />
       <PartsSearch />