From 2bd5df09558983aa524063a28c38be428537deb0 Mon Sep 17 00:00:00 2001
From: Dmitry Iv <df.creative@gmail.com>
Date: Thu, 30 May 2024 15:08:11 -0400
Subject: [PATCH] Separate selection into get/set

---
 index.html      |  2 +-
 main.css        |  1 +
 src/wavearea.js | 92 ++++++++++++++++++++++++++-----------------------
 3 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index bfc8ace..fe71449 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
         <button class="w-play" :ref="playButton"
                 :title="loading ? loading : `${playing ? 'Pause' : 'Play'} (Space)`"
                 :class="{'w-loading':loading}" :hidden="!segments.length"
-                :onclick..onclick="play"
+                :onclick..onclick="() => play()"
                 :onkeydown.document.space="e=>playButton.click(e)" tabindex="-1"
                 :onfocus="e => (e.relatedTarget ? e.relatedTarget.focus() : e.target.blur())"
                 :style="{
diff --git a/main.css b/main.css
index 90ab1e4..b43fafe 100644
--- a/main.css
+++ b/main.css
@@ -139,6 +139,7 @@ body {
 
   word-break: break-all;
   white-space: break-spaces;
+  line-break: anywhere;
 }
 
 .w-timecodes,
diff --git a/src/wavearea.js b/src/wavearea.js
index abf0ffe..c931963 100644
--- a/src/wavearea.js
+++ b/src/wavearea.js
@@ -66,7 +66,7 @@ let state = sprae(wavearea, {
   // caret repositioned my mouse
   async handleCaret() {
     // we need to do that in order to capture only manual selection change, not as result of programmatic caret move
-    let sel = selection()
+    let sel = selection.get()
     // skip unchanged
     if (!sel || (sel.start === state.caretOffset && sel.collapsed)) return
     state.caretOffset = sel.start;
@@ -93,7 +93,7 @@ let state = sprae(wavearea, {
       e.preventDefault();
       e.stopPropagation();
       // avoid double space insertion (osx)
-      if (e.data === '. ') selection(state.caretOffset)
+      if (e.data === '. ') selection.set(state.caretOffset)
     } else {
       handler.call(this, e);
     }
@@ -155,7 +155,7 @@ let state = sprae(wavearea, {
     editarea.focus();
 
     // from the end to the beginning
-    if (state.caretOffset === state.total) selection(state.caretOffset = state.clipStart = 0)
+    if (state.caretOffset === state.total) selection.set(state.caretOffset = state.clipStart = 0)
 
     state.scrollIntoCaret();
 
@@ -186,16 +186,16 @@ let state = sprae(wavearea, {
 
     const syncCaret = () => {
       checkScroll()
-      if (!state.selecting) {
-        let playedTime = (performance.now() * 0.001 - state._startTime);
-        let currentBlock = Math.min(state._startTimeOffset + Math.round(state.total * playedTime / state.duration), state.total)
-        if (loop) currentBlock = Math.min(currentBlock, clipEnd)
+      if (state.selecting) return
 
-        let sel = selection(state.caretOffset = currentBlock)
+      let playedTime = (performance.now() * 0.001 - state._startTime);
+      let currentBlock = Math.min(state._startTimeOffset + Math.round(state.total * playedTime / state.duration), state.total)
+      if (loop) currentBlock = Math.min(currentBlock, clipEnd)
 
-        state.updateCaretLine(sel)
-        state.scrollIntoCaret();
-      }
+      let sel = selection.set(state.caretOffset = currentBlock)
+
+      state.updateCaretLine(sel)
+      state.scrollIntoCaret();
     }
 
     // audio takes time to init before play on mobile, so we hold on caret
@@ -223,10 +223,10 @@ let state = sprae(wavearea, {
 
       // return selection if there was any
       //TODO: unmarkLoopRange()
-      if (state.loop) selection(clipStart, clipEnd)
+      if (state.loop) selection.set(clipStart, clipEnd)
 
       // adjust end caret position
-      else if (audio.currentTime >= audio.duration) selection(state.total)
+      else if (audio.currentTime >= audio.duration) selection.set(state.total)
 
       editarea.focus()
     }
@@ -242,7 +242,7 @@ let state = sprae(wavearea, {
       // try updating blob in history state by rebuilding audio
       await loadAudioFromURL()
     }
-    selection(state.caretOffset)
+    selection.set(state.caretOffset)
   },
 
   // make sure play/caret line pointer is correct
@@ -345,18 +345,46 @@ wavearea.addEventListener('touchstart', whatsLatency)
 wavearea.addEventListener('mousedown', whatsLatency)
 wavearea.addEventListener('keydown', whatsLatency)
 
-// get/set normalized selection
+// get normalized selection
 /**
  *
  * @param {number | Array} start – absolute offset (excluding modifier chars) or relative offset [node, offset]
  * @param {number | Array} end – absolute offset (excluding modifier chars) or relative offset [node, offset]
  * @returns {start, , end}
  */
-const selection = (start, end) => {
-  let s = window.getSelection()
+const selection = {
+  get() {
+    let s = window.getSelection()
+
+    // return unknown selection
+    if (!s.anchorNode || !editarea.contains(s.anchorNode)) return
+
+    // collect start/end offsets
+    let start = absOffset(s.anchorNode, s.anchorOffset), end = absOffset(s.focusNode, s.focusOffset)
+
+    // swap selection direction
+    let startNode = s.anchorNode.parentNode.closest('.w-segment'), startNodeOffset = s.anchorOffset,
+      endNode = s.focusNode.parentNode.closest('.w-segment'), endNodeOffset = s.focusOffset;
+    if (start > end) {
+      [end, endNode, endNodeOffset, start, startNode, startNodeOffset] =
+        [start, startNode, startNodeOffset, end, endNode, endNodeOffset]
+    }
+
+    return {
+      start,
+      startNode,
+      startNodeOffset,
+      end,
+      endNode,
+      endNodeOffset,
+      collapsed: s.isCollapsed,
+      range: s.getRangeAt(0)
+    }
+  },
+
+  set(start, end) {
+    let s = window.getSelection()
 
-  // set selection, if passed
-  if (start != null) {
     if (Array.isArray(start)) start = absOffset(...start)
     if (Array.isArray(end)) end = absOffset(...end)
 
@@ -365,6 +393,7 @@ const selection = (start, end) => {
     if (end == null) end = start
 
     // find start/end nodes
+    console.log(start)
     let [startNode, startNodeOffset] = relOffset(start)
     let [endNode, endNodeOffset] = relOffset(end)
 
@@ -388,31 +417,6 @@ const selection = (start, end) => {
       range: s.getRangeAt(0)
     }
   }
-
-  // return unknown selection
-  if (!s.anchorNode || !editarea.contains(s.anchorNode)) return
-
-  // collect start/end offsets
-  start = absOffset(s.anchorNode, s.anchorOffset), end = absOffset(s.focusNode, s.focusOffset)
-
-  // swap selection direction
-  let startNode = s.anchorNode.parentNode.closest('.w-segment'), startNodeOffset = s.anchorOffset,
-    endNode = s.focusNode.parentNode.closest('.w-segment'), endNodeOffset = s.focusOffset;
-  if (start > end) {
-    [end, endNode, endNodeOffset, start, startNode, startNodeOffset] =
-      [start, startNode, startNodeOffset, end, endNode, endNodeOffset]
-  }
-
-  return {
-    start,
-    startNode,
-    startNodeOffset,
-    end,
-    endNode,
-    endNodeOffset,
-    collapsed: s.isCollapsed,
-    range: s.getRangeAt(0)
-  }
 }
 
 // calculate absolute offset from relative pair