Allow more flexibility in styling active highlights

Author: samuelbradshaw

README.md

@@ -70,7 +70,7 @@ Options can be provided when Highlight Helper is initialized. They can also be s
 - **containerSelector** – CSS selector for the section of the page that should be annotatable. Default: `body`.
 - **paragraphSelector** – CSS selector for the paragraphs (or other block elements) on the page that should be annotatable. Each paragraph is expected to have an ID attribute in the HTML, which is used to keep track of where a highlight starts and ends. Default: `h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], p[id], ol[id], ul[id], dl[id], tr[id]`.
 - **colors** – Object that describes available highlight colors. Keys are color names, and values are [CSS color values](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default: red, orange, yellow, green, blue (see full default values at the bottom of highlight-helper.js).
-- **styles** – Object that describes available highlight styles. Keys are style names, and there are two properties for each style: `css` and `svg`. `css` is a CSS string used for styling highlights in `highlight-api` and `mark-elements` drawing modes, as well as for read-only highlights. `svg` is an SVG string used in `svg` drawing mode. The CSS custom property `var(--hh-color)` can be used to reference the highlight color value. For SVG highlights, the following variables (if present) will be replaced with relevant values from the highlight’s DOMRect: `{x}`, `{y}`, `{width}`, `{height}`, `{top}`, `{bottom}`, `{left}`, `{right}`. Default: fill, single-underline, double-underline, colored-text, redacted (see full default values at the bottom of highlight-helper.js).
+- **styles** – Object that describes available highlight styles. Keys are style names, and there are four properties for each style: `css`, `svg`, `css-active` (optional), and `svg-active` (optional). `css` is a CSS string used for styling highlights in `highlight-api` and `mark-elements` drawing modes, as well as for read-only highlights. `svg` is an SVG string (one or more SVG shapes) to represent the highlight in `svg` drawing mode. `css-active` and `svg-active` are alternative styles to be used when a highlight is active. The CSS custom property `var(--hh-color)` can be used to reference the highlight color value. For SVG highlights, the following variables (if present) will be replaced with relevant values from the highlight’s DOMRect: `{x}`, `{y}`, `{width}`, `{height}`, `{top}`, `{bottom}`, `{left}`, `{right}`. Default: fill, single-underline, double-underline, colored-text, redacted (see full default values at the bottom of highlight-helper.js).
 - **wrappers** – Object that describes available highlight wrappers. Keys are wrapper names, and values are objects with two optional properties: `start` (HTML string to be inserted at the beginning of the highlight), and `end` (HTML string to be inserted at the end of the highlight). Only read-only highlights support wrappers. To avoid problems when calculating ranges and offsets, all [text nodes](https://developer.mozilla.org/en-US/docs/Web/API/Text) in the start and end wrappers will be removed (if text is needed, it should be rendered with CSS). `var(--hh-color)` can be used to reference the highlight color value. Variables surrounded by curly brackets will be replaced with variables stored in the `wrapperVariables` attribute of the highlight, if applicable. See default values at the bottom of highlight-helper.js.
 - **selectionHandles** – Object that describes custom selection handles that a user can drag to resize a selection or highlight. Because most touch devices have built-in selection handles, custom selection handles will only show when using a mouse or trackpad. There are two properties: `left` (HTML string to be used for the left selection handle) and `right` (HTML string to be used for the right selection handle). `var(--hh-color)` can be used to reference the highlight color value. See default values at the bottom of highlight-helper.js.
 - **rememberStyle** – Whether the most recent color, style, and wrapper should be remembered and used by default the next time the user creates a highlight. Boolean. Default: `true`.

highlight-helper.js

@@ -448,10 +448,7 @@ function Highlighter(options = hhDefaultOptions) {
       changes: appearanceChanges.concat(boundsChanges),
     }
 
-    if (highlightId !== activeHighlightId || options.drawingMode === 'svg') {
-      this.drawHighlights([highlightId]);
-    }
-    
+    if (highlightId !== activeHighlightId) this.drawHighlights([highlightId]);    
     if (highlightId === activeHighlightId && appearanceChanges.length > 0) {
       updateSelectionUi('appearance');
     } else if (triggeredByUserAction && highlightId !== activeHighlightId) {
@@ -514,9 +511,7 @@ function Highlighter(options = hhDefaultOptions) {
     }
     updateSelectionUi('appearance');
     if (deactivatedHighlight) {
-      if (options.drawingMode !== 'svg') {
-        this.drawHighlights([deactivatedHighlight.highlightId]);
-      }
+      this.drawHighlights([deactivatedHighlight.highlightId]);
       this.annotatableContainer.dispatchEvent(new CustomEvent('hh:highlightdeactivate', { detail: {
         highlight: deactivatedHighlight,
       }}));
@@ -898,13 +893,22 @@ function Highlighter(options = hhDefaultOptions) {
     const style = highlightInfo?.style ?? null;
     const colorString = options.colors[color] ?? 'AccentColor';
 
-    // Update SVG shapes for the active highlight (bring shape group to front, and duplicate it to make the highlight darker)
+    // Draw SVG selection rects (SVG drawing mode only)
     svgActiveOverlay.innerHTML = '';
     if (activeHighlightId && options.drawingMode === 'svg') {
-      const svgHighlight = svgBackground.querySelector(`g[data-highlight-id="${activeHighlightId}"]`);
+      let range = getCorrectedRangeObj(activeHighlightId);
+      const rangeParagraphs = this.annotatableContainer.querySelectorAll(`#${highlightInfo.rangeParagraphIds.join(', #')}`);
+      const clientRects = getMergedClientRects(range, rangeParagraphs);
       svgActiveOverlay.dataset.color = color;
       svgActiveOverlay.dataset.style = style;
-      svgActiveOverlay.innerHTML = svgHighlight.innerHTML;
+      let svgContent = '';
+      for (const clientRect of clientRects) {
+        svgContent += getStyleTemplate(highlightInfo.style, 'svg', clientRect, true);
+      }
+      svgActiveOverlay.innerHTML = svgContent;
+      
+      // Bring active highlight to the front
+      const svgHighlight = svgBackground.querySelector(`g[data-highlight-id="${activeHighlightId}"]`);
       svgBackground.appendChild(svgHighlight);
       svgBackground.appendChild(svgActiveOverlay);
     }
@@ -914,9 +918,13 @@ function Highlighter(options = hhDefaultOptions) {
 
       // Update selection background
       if (activeHighlightId && options.drawingMode === 'svg') {
-        selectionStylesheet.replaceSync(`${options.containerSelector} ::selection { background-color: transparent; }`);
+        selectionStylesheet.replaceSync(`
+          ${options.containerSelector} g[data-highlight-id="${activeHighlightId}"][data-style] { display: none; }
+          ${options.containerSelector} .hh-wrapper-start[data-highlight-id="${activeHighlightId}"], .hh-wrapper-end[data-highlight-id="${activeHighlightId}"] { display: none; }
+          ${options.containerSelector} ::selection { background-color: transparent; }
+        `);
       } else if (activeHighlightId) {
-        const styleTemplate = getStyleTemplate(style, 'css', null);
+        const styleTemplate = getStyleTemplate(style, 'css', null, true);
         // Hide the active highlight (and wrappers), and set a selection style that mimics the highlight. This avoids the need to redraw the highlight while actively editing it (especially important for <mark> highlights, because DOM manipulation around the selection can make the selection UI unstable).
         selectionStylesheet.replaceSync(`
           ${options.containerSelector} ::highlight(${highlightInfo.escapedHighlightId}) { all: unset; }
@@ -1104,9 +1112,12 @@ function Highlighter(options = hhDefaultOptions) {
   }
 
   // Get style template for a given highlight style
-  const getStyleTemplate = (style, type, clientRect) => {
+  const getStyleTemplate = (style, type, clientRect = null, active = false) => {
     style = options.styles.hasOwnProperty(style) ? style : options.defaultStyle;
     let styleTemplate = options.styles[style]?.[type] ?? '';
+    if (active) {
+      styleTemplate = options.styles[style]?.[`${type}-active`] ?? styleTemplate;
+    }
     if (!styleTemplate) {
       console.warn(`Highlight style "${style}" in options does not have a defined "${type}" value.`);
       return;
@@ -1384,14 +1395,29 @@ let hhDefaultOptions = {
     'fill': {
       'css': 'background-color: hsl(from var(--hh-color) h s l / 50%);',
       'svg': '<rect x="{x}" y="{y}" rx="4" style="fill: hsl(from var(--hh-color) h s l / 50%); width: calc({width}px + ({height}px / 6)); height: calc({height}px * 0.85); transform: translateX(calc({height}px / -12)) translateY(calc({height}px * 0.14));" />',
+      'css-active': 'background-color: hsl(from var(--hh-color) h s l / 80%);',
+      'svg-active': `
+        <rect x="{x}" y="{y}" rx="4" style="fill: hsl(from var(--hh-color) h s l / 80%); width: calc({width}px + ({height}px / 6)); height: calc({height}px * 0.85); transform: translateX(calc({height}px / -12)) translateY(calc({height}px * 0.14));" />
+      `,
     },
     'single-underline': {
       'css': 'text-decoration: underline; text-decoration-color: var(--hh-color); text-decoration-thickness: 0.15em; text-underline-offset: 0.15em; text-decoration-skip-ink: none;',
       'svg': '<rect x="{x}" y="{y}" style="fill: var(--hh-color); width: {width}px; height: calc({height}px / 12); transform: translateY(calc({height}px * 0.9));" />',
+      'css-active': 'background-color: hsl(from var(--hh-color) h s l / 25%); text-decoration: underline; text-decoration-color: var(--hh-color); text-decoration-thickness: 0.15em; text-underline-offset: 0.15em; text-decoration-skip-ink: none;',
+      'svg-active': `
+        <rect x="{x}" y="{y}" rx="4" style="fill: hsl(from var(--hh-color) h s l / 25%); width: calc({width}px + ({height}px / 6)); height: calc({height}px * 0.85); transform: translateX(calc({height}px / -12)) translateY(calc({height}px * 0.14));" />
+        <rect x="{x}" y="{y}" style="fill: var(--hh-color); width: {width}px; height: calc({height}px / 12); transform: translateY(calc({height}px * 0.9));" />
+      `,
     },
     'double-underline': {
       'css': 'text-decoration: underline; text-decoration-color: var(--hh-color); text-decoration-style: double; text-decoration-skip-ink: none;',
       'svg': '<rect x="{x}" y="{y}" style="fill: var(--hh-color); width: {width}px; height: calc({height}px / 15); transform: translateY(calc({height}px * 0.9));" /><rect x="{x}" y="{y}" style="fill: var(--hh-color); width: {width}px; height: calc({height}px / 15); transform: translateY(calc({height}px * 1.05));" />',
+      'css-active': 'background-color: hsl(from var(--hh-color) h s l / 25%); text-decoration: underline; text-decoration-color: var(--hh-color); text-decoration-style: double; text-decoration-skip-ink: none;',
+      'svg-active': `
+        <rect x="{x}" y="{y}" rx="4" style="fill: hsl(from var(--hh-color) h s l / 25%); width: calc({width}px + ({height}px / 6)); height: calc({height}px * 0.85); transform: translateX(calc({height}px / -12)) translateY(calc({height}px * 0.14));" />
+        <rect x="{x}" y="{y}" style="fill: var(--hh-color); width: {width}px; height: calc({height}px / 15); transform: translateY(calc({height}px * 0.9));" />
+        <rect x="{x}" y="{y}" style="fill: var(--hh-color); width: {width}px; height: calc({height}px / 15); transform: translateY(calc({height}px * 1.05));" />
+      `,
     },
     'colored-text': {
       'css': 'color: var(--hh-color);',