Enhance caret interactions

Author: dy

index.html

@@ -10,9 +10,12 @@
 
   <script type="module">
     import wavearea from './dist/wavearea.js'
+    import { smoothCaret, loopHighlight } from './src/layers/index.js'
+
     wavearea(document.getElementById('wavearea'), {
       engine: window.__playerEngine || undefined,
       store: window.__store || undefined,
+      layers: [smoothCaret(), loopHighlight()],
     })
   </script>
 </body>

src/layers/index.js

@@ -0,0 +1,2 @@
+export { default as smoothCaret } from './smooth-caret.js'
+export { default as loopHighlight } from './loop-highlight.js'

src/layers/loop-highlight.js

@@ -0,0 +1,95 @@
+// Loop highlight layer — highlights the active loop region
+// Uses CSS Custom Highlight API when available, falls back to overlay div
+
+// convert clean offset to raw offset (including combining marks)
+function cleanToRaw(content, cleanPos) {
+  let clean = 0, raw = 0
+  while (clean < cleanPos && raw < content.length) {
+    if (content[raw] < '\u0300') clean++
+    raw++
+    while (raw < content.length && content[raw] >= '\u0300') raw++
+  }
+  return raw
+}
+
+export default function loopHighlight(opts = {}) {
+  let { color = 'rgba(100, 160, 255, 0.2)', name = 'loop' } = opts
+
+  return (state, root) => {
+    let hasAPI = typeof CSS !== 'undefined' && CSS.highlights
+
+    let style = document.createElement('style')
+    style.textContent = hasAPI
+      ? `::highlight(${name}) { background: ${color}; }`
+      : `.loop-highlight-overlay { position: absolute; background: ${color}; pointer-events: none; z-index: 1; }`
+    root.appendChild(style)
+
+    let highlight = hasAPI ? new Highlight() : null
+    if (hasAPI) CSS.highlights.set(name, highlight)
+
+    let overlay = null
+    let raf = null
+    let prevStart = -1, prevEnd = -1, prevLoop = false
+
+    let update = () => {
+      let ea = state.refs?.editarea
+      let textNode = ea?.firstChild
+
+      // skip if unchanged
+      if (state.loop === prevLoop && state.clipStart === prevStart && state.clipEnd === prevEnd) return
+      prevStart = state.clipStart; prevEnd = state.clipEnd; prevLoop = state.loop
+
+      if (!ea || !textNode || !state.loop || state.clipStart == null || state.clipEnd == null || state.clipStart >= state.clipEnd) {
+        if (hasAPI) highlight.clear()
+        if (overlay) overlay.style.display = 'none'
+        return
+      }
+
+      let content = textNode.textContent
+      let rawStart = cleanToRaw(content, state.clipStart)
+      let rawEnd = cleanToRaw(content, state.clipEnd)
+
+      if (hasAPI) {
+        highlight.clear()
+        let range = new Range()
+        range.setStart(textNode, Math.min(rawStart, content.length))
+        range.setEnd(textNode, Math.min(rawEnd, content.length))
+        highlight.add(range)
+      } else {
+        if (!overlay) {
+          overlay = document.createElement('div')
+          overlay.className = 'loop-highlight-overlay'
+          let container = root.querySelector('.container')
+          if (container) container.appendChild(overlay)
+        }
+        let range = new Range()
+        range.setStart(textNode, Math.min(rawStart, content.length))
+        range.setEnd(textNode, Math.min(rawEnd, content.length))
+        let rects = range.getClientRects()
+        if (rects.length) {
+          let eaRect = ea.getBoundingClientRect()
+          let r = rects[0]
+          overlay.style.display = ''
+          overlay.style.left = (r.left - eaRect.left) + 'px'
+          overlay.style.top = (r.top - eaRect.top) + 'px'
+          overlay.style.width = r.width + 'px'
+          overlay.style.height = r.height + 'px'
+        }
+      }
+    }
+
+    // poll on rAF
+    let poll = () => {
+      update()
+      raf = requestAnimationFrame(poll)
+    }
+    raf = requestAnimationFrame(poll)
+
+    return () => {
+      if (raf) cancelAnimationFrame(raf)
+      if (hasAPI) CSS.highlights.delete(name)
+      if (overlay) overlay.remove()
+      style.remove()
+    }
+  }
+}

src/layers/smooth-caret.js

@@ -0,0 +1,96 @@
+// Smooth caret layer — replaces native caret with animated one
+// Blinks in editing mode, smooth transition during playback,
+// follows selection endpoint during drag
+
+export default function smoothCaret(opts = {}) {
+  let { width = 1, color = 'currentColor', hideNative = true, transition = '20ms linear' } = opts
+
+  return (state, root) => {
+    // inject styles: blink animation + hide native caret
+    let css = document.createElement('style')
+    css.textContent = `
+      @keyframes caret-blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
+      @keyframes caret-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
+      ${hideNative ? '#editarea { caret-color: transparent; }' : ''}
+    `
+    root.appendChild(css)
+
+    let caret = document.createElement('div')
+    caret.className = 'smooth-caret'
+    caret.style.cssText = `
+      position: fixed;
+      width: ${width}px;
+      background: ${color};
+      pointer-events: none;
+      z-index: 10;
+      opacity: 0;
+      will-change: transform;
+      top: 0; left: 0;
+    `
+    document.body.appendChild(caret)
+
+    let raf = null
+    let lineH = 20
+    let prevX = 0, prevY = 0
+
+    let poll = () => {
+      let ea = state.refs?.editarea
+      if (ea) lineH = parseFloat(getComputedStyle(ea).lineHeight) || 20
+
+      let x = state.caretX, y = state.caretY
+
+      // during mouse drag, read live selection endpoint (state doesn't update until mouseup)
+      if (state.isMouseDown && ea) {
+        let s = window.getSelection()
+        if (s.rangeCount) {
+          // use focus end of selection (where the mouse is)
+          let r = document.createRange()
+          r.setStart(s.focusNode, s.focusOffset)
+          r.collapse(true)
+          let rects = r.getClientRects()
+          let rect = rects[0]
+          if (rect) { x = rect.right; y = rect.top }
+        }
+      }
+
+      if (x > 0 || y > 0) {
+        let yChanged = Math.abs(y - prevY) > 2
+        let moved = x !== prevX || yChanged
+        caret.style.transition = state.playing && !yChanged ? `transform ${transition}` : 'none'
+        caret.style.height = lineH + 'px'
+        caret.style.transform = `translate(${x}px, ${y}px)`
+        caret.style.opacity = '1'
+
+        if (state.playing) {
+          caret.style.animation = 'none'
+        } else if (moved) {
+          // restart blink cycle on move — visible immediately at new position
+          caret.style.animation = 'none'
+          caret.offsetHeight // force reflow to reset animation
+          caret.style.animation = 'caret-blink 1024ms step-end infinite'
+        }
+
+        prevX = x; prevY = y
+      } else {
+        caret.style.opacity = '0'
+      }
+
+      // sync CSS vars for #caret-line
+      let container = state.refs?.container
+      if (container && ea) {
+        let eaRect = ea.getBoundingClientRect()
+        container.style.setProperty('--caretx', (x - eaRect.left) + 'px')
+        container.style.setProperty('--carety', (y - eaRect.top) + 'px')
+      }
+
+      raf = requestAnimationFrame(poll)
+    }
+    raf = requestAnimationFrame(poll)
+
+    return () => {
+      if (raf) cancelAnimationFrame(raf)
+      caret.remove()
+      css.remove()
+    }
+  }
+}

src/wavearea.html

@@ -1,6 +1,6 @@
 <div class="container"
   :ref="refs.container"
-  :onmousedown.document..onmouseup.document="e=> (isMouseDown = true, e=> isMouseDown = false)"
+  :onmousedown.document..onmouseup.document="e=> (isMouseDown = true, loop = false, clipEnd = null, e.target.closest?.('#editarea') && window.getSelection().removeAllRanges(), e=> isMouseDown = false)"
   :style="{
     '--cols': cols,
     '--carety': (caretY - (refs.editarea?.getBoundingClientRect().top ?? 0)) + 'px',

src/wavearea.js

@@ -9,13 +9,14 @@ import createPlayer from './player.js';
 
 const BLOCK_SIZE = 1024
 
-export default function wavearea(el, { store, engine } = {}) {
+export default function wavearea(el, { store, engine, layers } = {}) {
   el.innerHTML = template
 
   let api = createApi({ store })
   let player = null
+  let _cleanups = []
 
-  return sprae(el, {
+  let state = sprae(el, {
     // deps
     selection,
     cleanText,
@@ -214,4 +215,12 @@ export default function wavearea(el, { store, engine } = {}) {
       return count
     }
   })
+
+  // initialize visual layers
+  if (layers) for (let layer of layers) {
+    let cleanup = layer(state, el)
+    if (cleanup) _cleanups.push(cleanup)
+  }
+
+  return state
 }