fix(viewer): marker annotation user interface problem on touch devices

Fixes the following problems: - Marker start button not enabled on touch devices - Editing memo disappears with a touch/click outside the box or by pressing Escape key.
vivliostyle · Apr 4, 2023 · 17c770d · 17c770d
1 parent 30f04ab
commit 17c770d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 17 deletions.
diff --git a/packages/viewer/src/bindings/textSelection.ts b/packages/viewer/src/bindings/textSelection.ts
@@ -16,20 +16,42 @@
  */
 
 import ko from "knockout";
-import { marksMenuStatus, processSelection } from "../viewmodels/marks-store";
+import {
+  marksMenuStatus,
+  marksStore,
+  processSelection,
+} from "../viewmodels/marks-store";
 
 ko.bindingHandlers.textSelection = {
   init(element, valueAccessor): void {
+    let mousedown = false;
     if (ko.unwrap(valueAccessor())) {
-      element.addEventListener("mouseup", (e: MouseEvent) => {
-        e.stopPropagation();
-        processSelection(document.getSelection());
+      element.addEventListener("mousedown", () => {
+        if (!mousedown && document.getSelection().type !== "Range") {
+          mousedown = true;
+        }
+      });
+      element.addEventListener("mouseup", () => {
+        if (mousedown) {
+          if (marksStore.enabled()) {
+            processSelection(document.getSelection());
+          }
+          mousedown = false;
+        }
       });
       document.addEventListener("selectionchange", () => {
-        if (document.getSelection().type != "Range") {
-          setTimeout(() => {
+        if (!marksStore.enabled()) return;
+        if (document.activeElement.id !== "vivliostyle-viewer-viewport") return;
+
+        if (!mousedown && document.getSelection().type === "Range") {
+          // For touch devices
+          if (marksMenuStatus.menuOpened()) {
+            marksMenuStatus.applyEditing();
+          }
+          if (marksMenuStatus.startButtonOpened()) {
             marksMenuStatus.startButtonOpened(false);
-          }, 150);
+          }
+          processSelection(document.getSelection());
         }
       });
     }

diff --git a/packages/viewer/src/html/vivliostyle-viewer.ejs b/packages/viewer/src/html/vivliostyle-viewer.ejs
@@ -102,7 +102,7 @@
     <div id="vivliostyle-text-selection-start-button" data-bind="visible: marksMenuStatus.startButtonOpened, clickOutside: marksMenuStatus.closeStartButton">
       <button id="viv-marker-start-marker" data-bind="text: t('Highlight_')"></button>
     </div>
-    <div role="dialog" id="vivliostyle-text-selection-edit-menu" data-bind="visible: marksMenuStatus.menuOpened, clickOutside: marksMenuStatus.closeMenu">
+    <div role="dialog" id="vivliostyle-text-selection-edit-menu" data-bind="visible: marksMenuStatus.menuOpened, clickOutside: marksMenuStatus.applyEditing">
       <div>
         <button class="viv-marker-color yellow" data-bind="attr: {title: t('Marker_Yellow')}, css: {'selected-color': marksMenuStatus.currentEditingColor() == 'yellow' }, click: () => { marksMenuStatus.currentEditingColor('yellow') }"></button>
         <button class="viv-marker-color red" data-bind="attr: {title: t('Marker_Red')}, css: { 'selected-color': marksMenuStatus.currentEditingColor() == 'red' }, click: () => { marksMenuStatus.currentEditingColor('red') }"></button>

diff --git a/packages/viewer/src/scss/ui.text-selection-menu.scss b/packages/viewer/src/scss/ui.text-selection-menu.scss
@@ -23,14 +23,15 @@
   font-size: 14px;
   font-family: $sans-serif;
   line-height: 1.25;
-  
+
   > div {
     white-space: nowrap;
     &:not(:first-child) {
       margin-top: 4px;
     }
   }
-  button, textarea {
+  button,
+  textarea {
     font: inherit;
   }
   .viv-marker-color {
@@ -103,6 +104,8 @@
     }
   }
   #viv-marker-start-marker {
+    -webkit-user-select: none;
+    user-select: none;
     &:before {
       content: fa-content($fa-var-marker);
     }

diff --git a/packages/viewer/src/viewmodels/navigation.ts b/packages/viewer/src/viewmodels/navigation.ts
@@ -896,20 +896,25 @@ class Navigation {
         return !this.toggleMarker();
       case Keys.Escape:
         if (marksStore.enabled()) {
+          if (marksStore.menuStatus.startButtonOpened()) {
+            marksStore.menuStatus.closeStartButton();
+            return false;
+          }
+          if (marksStore.menuStatus.menuOpened()) {
+            if (document.activeElement.id !== "vivliostyle-memo-edit-area") {
+              marksStore.menuStatus.closeMenu();
+              return false;
+            }
+            return true;
+          }
           if (marksStore.marksBox.detailsElement.open) {
             marksStore.marksBox.detailsElement.open = false;
-            return true;
+            return false;
           }
         }
         if (this.viewer.tocVisible()) {
           return !this.toggleTOC();
         }
-        if (marksStore.menuStatus.startButtonOpened()) {
-          marksStore.menuStatus.closeStartButton();
-        }
-        if (marksStore.menuStatus.menuOpened()) {
-          marksStore.menuStatus.closeMenu();
-        }
         viewportElement.focus();
         return true;
       case Keys.Space: