Add options for controlling visibility of custom selection handles

Author: samuelbradshaw

README.md

@@ -101,6 +101,9 @@ Options can be provided when Highlight Helper is initialized. They can also be s
 - **defaultStyle** – Key of the default highlight style. Default: `fill`.
 - **defaultWrapper** – Key of the default highlight wrapper. Default: `none`.
 - **highlightIdFunction** – Identifier of a function that provides unique IDs for new highlights. Default: `hhGetNewHighlightId`.
+- **showCustomSelectionHandlesForActiveHighlights** – Whether custom selection handles should show for active highlights. Default: `true`.
+- **showCustomSelectionHandlesForTextSelection** – Whether custom selection handles should show for text selection. Default: `false`.
+- **showCustomSelectionHandlesOnTouch** – Whether custom selection handles should show on touch devices. Default: `false`.
 
 
 ### <a name="custom-events"></a>Custom events

demo.html

@@ -147,6 +147,12 @@ <h1 id="title1">Highlight Helper Demo</h1>
         <label><input type="radio" name="hh-drawing-mode" value="highlight-api"> Custom Highlight API</label><br>
         <label><input type="radio" name="hh-drawing-mode" value="mark-elements"> HTML mark elements</label><br>
       </p>
+      <p>
+        Show custom selection handles:<br>
+        <label><input type="checkbox" id="hh-selection-handles-active-highlights" checked> For active highlights</label><br>
+        <label><input type="checkbox" id="hh-selection-handles-text-selection"> For text selection</label><br>
+        <label><input type="checkbox" id="hh-selection-handles-touch"> On touch devices</label><br>
+      </p>
       <b>Active highlight:</b>
       <div id="snippet-container">
         <div id="snippet">N/A</div>
@@ -263,6 +269,12 @@ <h1>Select One</h1>
           }
         });
       }
+      const selectionHandlesActiveHighlightsCheckbox = document.getElementById('hh-selection-handles-active-highlights');
+      selectionHandlesActiveHighlightsCheckbox.addEventListener('change', (event) => { highlighter.setOption('showCustomSelectionHandlesForActiveHighlights', event.currentTarget.checked); });
+      const selectionHandlesTextSelectionCheckbox = document.getElementById('hh-selection-handles-text-selection');
+      selectionHandlesTextSelectionCheckbox.addEventListener('change', (event) => { highlighter.setOption('showCustomSelectionHandlesForTextSelection', event.currentTarget.checked); });
+      const selectionHandlesOnTouchCheckbox = document.getElementById('hh-selection-handles-touch');
+      selectionHandlesOnTouchCheckbox.addEventListener('change', (event) => { highlighter.setOption('showCustomSelectionHandlesOnTouch', event.currentTarget.checked); });
 
       const container = document.querySelector(highlighter.getOptions().containerSelector);
       const snippetDiv = document.getElementById('snippet');

highlight-helper.js

@@ -70,6 +70,9 @@ function Highlighter(options = hhDefaultOptions) {
         width: 0px;
         visibility: hidden;
       }
+      [data-hh-pointer-down="true"] .hh-selection-handle {
+        visibility: hidden !important;
+      }
       .hh-selection-handle-content {
         position: absolute;
         height: 100%;
@@ -642,13 +645,13 @@ function Highlighter(options = hhDefaultOptions) {
   this.annotatableContainer.addEventListener('pointerdown', (event) => respondToPointerDown(event), { signal: controller.signal });
   const respondToPointerDown = (event) => {
     const isSecondaryClick = (event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey);
+    if (!isSecondaryClick) this.annotatableContainer.dataset.hhPointerDown = 'true';
     pointerType = event.pointerType;
 
     // Pointer down on a selection handle
     if (event.target?.closest('.hh-selection-handle')) {
       if (!isSecondaryClick) {
         activeSelectionHandle = event.target.parentElement.closest('.hh-selection-handle');
-        this.annotatableContainer.dataset.hhDragging = 'true';
         const selectionHandleClientRect = activeSelectionHandle.getBoundingClientRect();
         const lineHeight = selectionHandleClientRect.bottom - selectionHandleClientRect.top;
         activeSelectionHandle.dataset.dragYOffset = Math.max(0, event.clientY - selectionHandleClientRect.bottom + (lineHeight / 6));
@@ -748,10 +751,10 @@ function Highlighter(options = hhDefaultOptions) {
     }
     tapResult = null;
     longPressTimeoutId = clearTimeout(longPressTimeoutId);
+    this.annotatableContainer.dataset.hhPointerDown = 'false';
     if (activeSelectionHandle) {
       activeSelectionHandle = null;
       updateSelectionUi('bounds');
-      this.annotatableContainer.dataset.hhDragging = 'false';
       this.annotatableContainer.removeEventListener('pointermove', respondToSelectionHandleDrag);
     }
   }
@@ -898,7 +901,7 @@ function Highlighter(options = hhDefaultOptions) {
     const highlightInfo = highlightsById[activeHighlightId] ?? null;
     const color = highlightInfo?.color ?? null;
     const style = highlightInfo?.style ?? null;
-    const colorString = options.colors[color] ?? 'AccentColor';
+    const colorString = options.colors[color] ?? (CSS.supports('color', 'AccentColor') ? 'AccentColor' : 'dodgerblue');
 
     // Draw SVG selection rects (SVG drawing mode only)
     svgActiveOverlay.innerHTML = '';
@@ -953,16 +956,22 @@ function Highlighter(options = hhDefaultOptions) {
 
     } else if (changeType === 'bounds') {
       // Update selection handle location and visibility
-      if (selection.type === 'Range' && activeHighlightId && pointerType === 'mouse' && !activeSelectionHandle) {
+      if (selection.type === 'Range') {
         const selectionRangeRects = selectionRange.getClientRects();
         const startRect = selectionRangeRects[0];
         const endRect = selectionRangeRects[selectionRangeRects.length-1];
         const relativeAncestorClientRect = this.relativeAncestorElement.getBoundingClientRect();
         const startNodeIsRtl = window.getComputedStyle(selectionRange.startContainer.parentElement).direction === 'rtl';
         const endNodeIsRtl = window.getComputedStyle(selectionRange.endContainer.parentElement).direction === 'rtl';
 
+        if (
+          (options.showCustomSelectionHandlesOnTouch || pointerType === 'mouse')
+          && ((options.showCustomSelectionHandlesForActiveHighlights && activeHighlightId)
+            || (options.showCustomSelectionHandlesForTextSelection && !activeHighlightId))
+        ) {
+          setCustomSelectionHandleVisibility(true);
+        }
         for (const selectionHandle of selectionHandles) {
-          selectionHandle.style.visibility = 'visible';
           let side;
           if (selectionHandle.dataset.position === 'start') {
             side = startNodeIsRtl ? 'right' : 'left';
@@ -981,12 +990,17 @@ function Highlighter(options = hhDefaultOptions) {
           }
         }
       } else {
-        selectionHandles[0].style.visibility = 'hidden';
-        selectionHandles[1].style.visibility = 'hidden';
+        setCustomSelectionHandleVisibility(false);
       }
     }
   }
 
+  const setCustomSelectionHandleVisibility = (visible = selectionHandles[0].style.visibility === 'hidden') => {
+    for (const selectionHandle of selectionHandles) {
+      selectionHandle.style.visibility = visible ? 'visible' : 'hidden';
+    }
+  }
+  
   // Update the selection or highlight range to stay within the annotatable container
   const snapRangeToBoundaries = (range, anchorNode = null) => {
     let startNode = range.startContainer;
@@ -1450,6 +1464,9 @@ let hhDefaultOptions = {
   defaultStyle: 'fill',
   defaultWrapper: 'none',
   highlightIdFunction: hhGetNewHighlightId,
+  showCustomSelectionHandlesForActiveHighlights: true,
+  showCustomSelectionHandlesForTextSelection: false,
+  showCustomSelectionHandlesOnTouch: false,
 }
 
 console.info('Highlighter loaded');