From 7e3ec936a61542616f9e8cccc83ac49d71652944 Mon Sep 17 00:00:00 2001 From: vorotamoroz Date: Fri, 8 Jul 2022 18:02:27 +0900 Subject: [PATCH] More ninjanized --- main.ts | 74 ++++++++++++++--------- manifest.json | 2 +- package-lock.json | 4 +- package.json | 2 +- styles.css | 146 ++++++++++++++++++++++++++++------------------ 5 files changed, 139 insertions(+), 89 deletions(-) diff --git a/main.ts b/main.ts index 9eaa2c4..d0b7adf 100644 --- a/main.ts +++ b/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() {} } diff --git a/manifest.json b/manifest.json index 839e553..aa67840 100644 --- a/manifest.json +++ b/manifest.json @@ -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", diff --git a/package-lock.json b/package-lock.json index 9b7712b..472f71e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 0cf71b9..eca1dcb 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/styles.css b/styles.css index 7bdaeda..b424487 100644 --- a/styles.css +++ b/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; - } -} \ No newline at end of file + 100% { + opacity: 0; + } +}