From f291540cd2eaeeba3ae47408f2e53b9a73df5b1d Mon Sep 17 00:00:00 2001
From: Skyler Lehmkuhl <skycooler@gmail.com>
Date: Sat, 7 Dec 2024 23:33:14 -0500
Subject: [PATCH] rotate cursor

---
 src/assets/arrow-counterclockwise.svg |  4 ++++
 src/main.js                           | 15 +++++++++++++++
 src/styles.css                        | 12 ++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 src/assets/arrow-counterclockwise.svg

diff --git a/src/assets/arrow-counterclockwise.svg b/src/assets/arrow-counterclockwise.svg
new file mode 100644
index 0000000..01457ce
--- /dev/null
+++ b/src/assets/arrow-counterclockwise.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
+</svg>
diff --git a/src/main.js b/src/main.js
index bcee869..b14eb69 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2482,6 +2482,20 @@ function stage() {
   stageWrapper.className = "stageWrapper"
   let selectionRect = document.createElement("div")
   selectionRect.className = "selectionRect"
+  for (let i of ["nw", "ne", "se", "sw"]) {
+    let cornerRotateRect = document.createElement("div")
+    cornerRotateRect.classList.add("cornerRotateRect")
+    cornerRotateRect.classList.add(i)
+    cornerRotateRect.addEventListener('mouseup', (e) => {
+      const newEvent = new MouseEvent(e.type, e);
+      stage.dispatchEvent(newEvent)
+    })
+    cornerRotateRect.addEventListener('mousemove', (e) => {
+      const newEvent = new MouseEvent(e.type, e);
+      stage.dispatchEvent(newEvent)
+    })
+    selectionRect.appendChild(cornerRotateRect)
+  }
   for (let i of ["nw", "n", "ne", "e", "se", "s", "sw", "w"]) {
     let cornerRect = document.createElement("div")
     cornerRect.classList.add("cornerRect")
@@ -2524,6 +2538,7 @@ function stage() {
     })
     selectionRect.appendChild(cornerRect)
   }
+
   stage.addEventListener("drop", (e) => {
     e.preventDefault()
     let mouse = getMousePos(stage, e)
diff --git a/src/styles.css b/src/styles.css
index 44691b9..42b5020 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -189,11 +189,19 @@ button {
   user-select: none;
 
   pointer-events: auto;
+  /* z-index: 2; */
 }
 .cornerRect:hover {
   width: 15px;
   height: 15px;
 }
+.cornerRotateRect {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  /* background-color: blue; */
+  pointer-events: auto;
+}
 .nw {
   top: 0px;
   left: 0px;
@@ -242,6 +250,10 @@ button {
   transform: translate(-50%, -50%);
   cursor:w-resize;
 }
+.cornerRotateRect.nw,.cornerRotateRect.ne,.cornerRotateRect.se,.cornerRotateRect.sw {
+  /* cursor: url("assets/arrow-counterclockwise.svg") 12 12, auto;   */
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' class='bi bi-arrow-counterclockwise' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466'/%3E%3C/svg%3E") 12 12, auto;
+}
 .toolbar {
   display: flex;
   flex-direction: row;