skyler
/
Lightningbeam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rotate cursor

This commit is contained in:
Skyler Lehmkuhl 2024-12-07 23:33:14 -05:00
parent 369a6ddf8b
commit f291540cd2
3 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/arrow-counterclockwise.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 357 B

15
src/main.js
View File

@ -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)

12
src/styles.css
View File

@ -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;