mirror of
https://github.com/vrtmrz/ninja-cursor.git
synced 2026-07-22 06:40:31 +00:00
More ninjanized
This commit is contained in:
vorotamoroz
parent
05a0de7117
commit
7e3ec936a6
5 changed files with 139 additions and 89 deletions
74
main.ts
74
main.ts
|
|
@ -1,15 +1,17 @@
|
|||
import { Plugin } from 'obsidian';
|
||||
|
||||
import { Plugin } from "obsidian";
|
||||
|
||||
let lastPos: DOMRect | null = null;
|
||||
let styleCount = 0;
|
||||
export default class NinjaCursorPlugin extends Plugin {
|
||||
wrapperElement: HTMLDivElement;
|
||||
cursorElement: HTMLSpanElement;
|
||||
|
||||
async onload() {
|
||||
this.wrapperElement = document.createElement("div");
|
||||
this.wrapperElement.addClass("cursorWrapper");
|
||||
this.cursorElement = document.createElement("span");
|
||||
|
||||
document.body.appendChild(this.cursorElement);
|
||||
this.wrapperElement.appendChild(this.cursorElement);
|
||||
document.body.appendChild(this.wrapperElement);
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty("--cursor-x1", `${0}`);
|
||||
root.style.setProperty("--cursor-y1", `${0}`);
|
||||
|
|
@ -20,27 +22,28 @@ export default class NinjaCursorPlugin extends Plugin {
|
|||
const moveCursor = () => {
|
||||
const selection = window.getSelection();
|
||||
if (!selection) {
|
||||
console.log("Could not find selection")
|
||||
console.log("Could not find selection");
|
||||
return;
|
||||
}
|
||||
if (selection.rangeCount == 0) return;
|
||||
const range = selection.getRangeAt(0);
|
||||
let rect = range?.getBoundingClientRect()
|
||||
let rect = range?.getBoundingClientRect();
|
||||
if (!rect) {
|
||||
console.log("Could not find range")
|
||||
console.log("Could not find range");
|
||||
return;
|
||||
}
|
||||
if (rect.x == 0 && rect.y == 0) {
|
||||
const textRange = document.createRange()
|
||||
textRange.setStart(range.startContainer, range.startOffset)
|
||||
textRange.setEndAfter(range.startContainer)
|
||||
let textRect = textRange.getBoundingClientRect()
|
||||
const textRange = document.createRange();
|
||||
textRange.setStart(range.startContainer, range.startOffset);
|
||||
textRange.setEndAfter(range.startContainer);
|
||||
let textRect = textRange.getBoundingClientRect();
|
||||
if (textRect.x == 0 && textRect.y == 0) {
|
||||
textRange.setStart(range.endContainer, range.endOffset - 1)
|
||||
textRange.setEnd(range.endContainer, range.endOffset)
|
||||
textRange.setStart(range.endContainer, range.endOffset - 1);
|
||||
textRange.setEnd(range.endContainer, range.endOffset);
|
||||
const textRectx = textRange.getClientRects();
|
||||
const txx = textRectx.item(textRectx.length - 1);
|
||||
if (!txx) {
|
||||
console.log("Could not found")
|
||||
console.log("Could not found");
|
||||
return;
|
||||
}
|
||||
textRect = txx;
|
||||
|
|
@ -61,6 +64,27 @@ export default class NinjaCursorPlugin extends Plugin {
|
|||
return;
|
||||
}
|
||||
styleCount = (styleCount + 1) % 2;
|
||||
const dx = rect.x - lastPos.x;
|
||||
const dy = lastPos.y - rect.y;
|
||||
const cursorDragAngle = Math.atan2(dx, dy) + Math.PI / 2;
|
||||
const cursorDragDistance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
const cursorDragHeight =
|
||||
Math.abs(Math.sin(cursorDragAngle)) * 8 +
|
||||
Math.abs(Math.cos(cursorDragAngle)) * rect.height;
|
||||
const cursorDragWidth = cursorDragDistance;
|
||||
root.style.setProperty(
|
||||
"--cursor-drag-height",
|
||||
`${cursorDragHeight}px`
|
||||
);
|
||||
root.style.setProperty(
|
||||
"--cursor-drag-width",
|
||||
`${cursorDragWidth}px`
|
||||
);
|
||||
root.style.setProperty(
|
||||
"--cursor-drag-angle",
|
||||
`${cursorDragAngle}rad`
|
||||
);
|
||||
root.style.setProperty("--cursor-height", `${rect.height}px`);
|
||||
root.style.setProperty("--cursor-x1", `${lastPos.x}px`);
|
||||
root.style.setProperty("--cursor-y1", `${lastPos.y}px`);
|
||||
|
|
@ -74,28 +98,22 @@ export default class NinjaCursorPlugin extends Plugin {
|
|||
window.requestAnimationFrame((time) => {
|
||||
this.cursorElement.addClass(`x-cursor${styleCount}`);
|
||||
lastPos = rect;
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
this.registerDomEvent(window, "keydown", (ev) => {
|
||||
moveCursor();
|
||||
|
||||
})
|
||||
});
|
||||
this.registerDomEvent(window, "mousedown", () => {
|
||||
moveCursor();
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onunload() {
|
||||
document.body.removeChild(this.cursorElement);
|
||||
document.body.removeChild(this.wrapperElement);
|
||||
}
|
||||
|
||||
async loadSettings() {
|
||||
async loadSettings() {}
|
||||
|
||||
}
|
||||
|
||||
async saveSettings() {
|
||||
|
||||
}
|
||||
async saveSettings() {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"id": "ninja-cursor",
|
||||
"name": "Ninja Cursor",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.2",
|
||||
"minAppVersion": "0.12.0",
|
||||
"description": "The plugin which enhance cursor visiblity.",
|
||||
"author": "vorotamoroz",
|
||||
|
|
|
|||
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "ninja-cursor",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.2",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "ninja-cursor",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.2",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/node": "^16.11.6",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "ninja-cursor",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.2",
|
||||
"description": "The plugin which enhance cursor visiblity.",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
146
styles.css
146
styles.css
|
|
@ -1,82 +1,114 @@
|
|||
.x-cursor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: var(--cursor-height);
|
||||
width: 8px;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
background: var(--text-normal);
|
||||
transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: var(--cursor-height);
|
||||
width: 8px;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
background: var(--text-normal);
|
||||
transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.x-cursor:after {
|
||||
content: "";
|
||||
height: var(--cursor-drag-height);
|
||||
width: var(--cursor-drag-width);
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
|
||||
background: linear-gradient(to right, var(--text-normal), transparent);
|
||||
transform: rotate(var(--cursor-drag-angle));
|
||||
transform-origin: 4px center;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.x-cursor0 {
|
||||
animation: a1 75ms cubic-bezier(0.34, 1.36, 0.64, 1) 0s both;
|
||||
animation: a1 75ms cubic-bezier(0.34, 1.26, 0.84, 1) 0s both;
|
||||
}
|
||||
|
||||
.x-cursor1 {
|
||||
animation: a2 75ms cubic-bezier(0.34, 1.36, 0.64, 1) 0s both;
|
||||
animation: a2 75ms cubic-bezier(0.34, 1.26, 0.84, 1) 0s both;
|
||||
}
|
||||
|
||||
:root {
|
||||
--cursor-x1: "0px";
|
||||
--cursor-x2: "0px";
|
||||
--cursor-y1: "0px";
|
||||
--cursor-y2: "0px";
|
||||
--cursor-height: 18px;
|
||||
--cursor-x1: "0px";
|
||||
--cursor-x2: "0px";
|
||||
--cursor-y1: "0px";
|
||||
--cursor-y2: "0px";
|
||||
--cursor-drag-distance: "0px";
|
||||
--cursor-drag-angle: "0deg";
|
||||
--cursor-drag-width: "0px";
|
||||
--cursor-drag-height: "0px";
|
||||
|
||||
--cursor-height: 18px;
|
||||
}
|
||||
.cursorWrapper {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@keyframes a1 {
|
||||
0% {
|
||||
transform: translate3d(var(--cursor-x1), var(--cursor-y1), 0);
|
||||
background-color: var(--text-normal);
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
transform: translate3d(var(--cursor-x1), var(--cursor-y1), 0);
|
||||
background-color: var(--text-normal);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
4% {
|
||||
opacity: 1;
|
||||
}
|
||||
4% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
80% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0);
|
||||
background-color: var(--text-normal);
|
||||
opacity: 0.9;
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0);
|
||||
background-color: var(--text-normal);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes a2 {
|
||||
0% {
|
||||
transform: translate3d(var(--cursor-x1), var(--cursor-y1), 0);
|
||||
background-color: var(--text-normal);
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
transform: translate3d(var(--cursor-x1), var(--cursor-y1), 0);
|
||||
background-color: var(--text-normal);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
4% {
|
||||
opacity: 1;
|
||||
}
|
||||
4% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
80% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0);
|
||||
background-color: var(--text-normal);
|
||||
opacity: 0.9;
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0);
|
||||
background-color: var(--text-normal);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue