@samuelbradshaw/highlight-helper-js 0.7.4 → 0.8.0

package/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

package/demo.html

@@ -147,6 +147,12 @@
         <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 @@
           }
         });
       }
+      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');

package/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%;
@@ -457,7 +460,7 @@ function Highlighter(options = hhDefaultOptions) {
       this.activateHighlight(highlightId);
     } else if (activeHighlightId && highlightId === activeHighlightId && appearanceChanges.length > 0) {
       updateSelectionUi('appearance');
-    } else {
+    } else if (highlightId !== activeHighlightId) {
       this.drawHighlights([highlightId]);
     }
     
@@ -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 = '';
@@ -916,10 +919,8 @@ function Highlighter(options = hhDefaultOptions) {
       
       // Bring active highlight to the front
       const svgHighlight = svgBackground.querySelector(`g[data-highlight-id="${activeHighlightId}"]`);
-      if (svgHighlight) {
-        svgBackground.appendChild(svgHighlight);
-        svgBackground.appendChild(svgActiveOverlay);
-      }
+      if (svgHighlight) svgBackground.appendChild(svgHighlight);
+      svgBackground.appendChild(svgActiveOverlay);
     }
     
     if (changeType === 'appearance') {
@@ -955,7 +956,7 @@ 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];
@@ -963,8 +964,14 @@ function Highlighter(options = hhDefaultOptions) {
         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';
@@ -983,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;
@@ -1014,7 +1026,7 @@ function Highlighter(options = hhDefaultOptions) {
     
     // Prevent the range from starting or ending in an element that doesn't match the paragraph selector
     if (this.annotatableContainer.contains(range.commonAncestorContainer) && (!startNode.parentElement.closest(options.paragraphSelector) || !endNode.parentElement.closest(options.paragraphSelector))) {
-      let annotatableParagraphsInRange = Array.from(this.annotatableParagraphs).filter((paragraph) => {
+      const annotatableParagraphsInRange = Array.from(this.annotatableParagraphs).filter((paragraph) => {
         const relativeStartPosition = startNode.compareDocumentPosition(paragraph);
         const relativeEndPosition = endNode.compareDocumentPosition(paragraph);
         return (relativeStartPosition & Node.DOCUMENT_POSITION_FOLLOWING || relativeStartPosition & Node.DOCUMENT_POSITION_CONTAINS) && (relativeEndPosition & Node.DOCUMENT_POSITION_PRECEDING || relativeEndPosition & Node.DOCUMENT_POSITION_CONTAINS);
@@ -1310,8 +1322,8 @@ function Highlighter(options = hhDefaultOptions) {
               mergedRect.width = rect.width;
             }
             // Process then remove rects that apply to the current line
-            const minLeft = Math.min(mergedRect.x, rect.x);
-            const maxRight = Math.max(mergedRect.right, rect.right);
+            const minLeft = Math.max(paragraphRect.left, Math.min(mergedRect.x, rect.x));
+            const maxRight = Math.min(paragraphRect.right, Math.max(mergedRect.right, rect.right));
             mergedRect.width = maxRight - minLeft;
             mergedRect.x = minLeft;
             unmergedRects.splice(r, 1); r--;
@@ -1452,6 +1464,9 @@ let hhDefaultOptions = {
   defaultStyle: 'fill',
   defaultWrapper: 'none',
   highlightIdFunction: hhGetNewHighlightId,
+  showCustomSelectionHandlesForActiveHighlights: true,
+  showCustomSelectionHandlesForTextSelection: false,
+  showCustomSelectionHandlesOnTouch: false,
 }
 
 console.info('Highlighter loaded');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samuelbradshaw/highlight-helper-js",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "JavaScript tool that enables highlighting or underlining text in an HTML page.",
   "type": "module",
   "main": "highlight-helper.mjs",