feat: implement cursor override for duplicate cursor handling in measure tool

Author: Justineo

packages/extension/composables/key-lock.ts

@@ -1,9 +1,26 @@
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, useMutationObserver } from '@vueuse/core'
 
 import { options } from '@/ui/state'
 import { getCanvas, setLockAltKey, setLockMetaKey } from '@/utils'
 
 let spacePressed = false
+let altPressed = false
+let duplicateClass: string | null = null
+let classSnapshot = new Set<string>()
+const DUPLICATE_URL_SIGNATURE =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAIZElEQVR4AeyYTWxUVRTH3yD9UCEE'
+function extractHotspot(cursor: string): [number, number] | null {
+  const normalized = cursor.replace(/\s+/g, ' ')
+  const match =
+    normalized.match(/(?:-webkit-)?image-set\([^)]*\)\s*(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)/i) ??
+    normalized.match(/\)\s*(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)/)
+  if (!match) return null
+  return [Number(match[1]), Number(match[2])]
+}
+
+function hasDuplicateSignature(cursor: string) {
+  return cursor.includes(DUPLICATE_URL_SIGNATURE)
+}
 
 function pause() {
   setLockMetaKey(false)
@@ -15,15 +32,15 @@ function resume() {
     return
   }
   setLockMetaKey(options.value.deepSelectOn)
-  setLockAltKey(options.value.measureOn)
+  syncAltLock()
 }
 
 function pauseMeasure() {
   setLockAltKey(false)
 }
 
 function resumeMeasure() {
-  setLockAltKey(options.value.measureOn)
+  syncAltLock()
 }
 
 let resuming: number | null = null
@@ -43,21 +60,89 @@ function pauseMetaThenResume() {
 }
 
 function keydown(e: KeyboardEvent) {
+  if (!options.value.measureOn && e.key === 'Alt') {
+    return
+  }
+  if (!altPressed && e.key === 'Alt') {
+    altPressed = true
+    setLockAltKey(false)
+    reconcileCursor()
+  }
   if (!spacePressed && e.key === ' ') {
     spacePressed = true
     pause()
   }
 }
 
 function keyup(e: KeyboardEvent) {
+  if (!options.value.measureOn && e.key === 'Alt') {
+    return
+  }
+  if (altPressed && e.key === 'Alt') {
+    altPressed = false
+    syncAltLock()
+    reconcileCursor()
+  }
   if (spacePressed && e.key === ' ') {
     spacePressed = false
     resume()
   }
 }
 
+function syncAltLock() {
+  setLockAltKey(!altPressed && options.value.measureOn)
+}
+
+function isDuplicateCursor(host: HTMLElement) {
+  if (duplicateClass) {
+    return host.classList.contains(duplicateClass)
+  }
+  const cursor = getComputedStyle(host).cursor
+  const hotspot = extractHotspot(cursor)
+  return hotspot != null && hotspot[0] === 8 && hotspot[1] === 8 && hasDuplicateSignature(cursor)
+}
+
+function learnDuplicateClass(host: HTMLElement) {
+  if (duplicateClass) return
+  const added = Array.from(host.classList).filter((c) => !classSnapshot.has(c))
+  if (added.length === 1) {
+    duplicateClass = added[0]
+  }
+}
+
+function applyCursorCover(host: HTMLElement) {
+  host.dataset.tpCursorOverride = ''
+}
+
+function clearCursorCover(host: HTMLElement) {
+  delete host.dataset.tpCursorOverride
+}
+
+function reconcileCursor(host?: HTMLElement | null) {
+  const target = host ?? cursorHost
+  if (!target) return
+  if (!options.value.measureOn || altPressed) {
+    clearCursorCover(target)
+    classSnapshot = new Set(target.classList)
+    return
+  }
+  if (isDuplicateCursor(target)) {
+    learnDuplicateClass(target)
+    applyCursorCover(target)
+  } else {
+    clearCursorCover(target)
+  }
+  classSnapshot = new Set(target.classList)
+}
+
+let cursorHost: HTMLElement | null = null
+
 export function useKeyLock() {
   const canvas = getCanvas()
+  cursorHost = canvas?.parentElement?.parentElement as HTMLElement | null
+  if (cursorHost) {
+    classSnapshot = new Set(cursorHost.classList)
+  }
 
   useEventListener(canvas, 'mouseleave', pause)
   useEventListener(canvas, 'mouseenter', resume)
@@ -67,10 +152,34 @@ export function useKeyLock() {
   useEventListener('keydown', keydown)
   useEventListener('keyup', keyup)
 
+  if (cursorHost) {
+    useMutationObserver(
+      cursorHost,
+      () => {
+        if (!options.value.measureOn) {
+          clearCursorCover(cursorHost!)
+          return
+        }
+        reconcileCursor(cursorHost)
+      },
+      { attributes: true, attributeFilter: ['class'] }
+    )
+  }
+
+  reconcileCursor(cursorHost)
+
   watch(
     () => options.value.deepSelectOn,
     () => {
       setLockMetaKey(options.value.deepSelectOn)
     }
   )
+
+  watch(
+    () => options.value.measureOn,
+    () => {
+      syncAltLock()
+      reconcileCursor(cursorHost)
+    }
+  )
 }

packages/extension/entrypoints/ui/style.css

@@ -158,3 +158,18 @@ tempad input[type="number"]:focus-visible {
   [class^="mode_switcher_toggle--toggleWrapper"] {
   display: none !important;
 }
+
+@layer overrides {
+  /* Cursor override for blocking duplicate cursor when measure tool is on */
+  [data-tp-cursor-override] {
+    cursor:
+      -webkit-image-set(
+          url("data:image/png;base64,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")
+            2x,
+          url("data:image/png;base64,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")
+            1x
+        )
+        4 4,
+      auto !important;
+  }
+}