Fix unified hover bar pattern swatch for per-point marker.pattern

draftlogs/8039_fix.md

@@ -0,0 +1 @@
+- Fix unified hover swatch color and pattern for bar `marker.pattern` arrays [[#8039](https://github.com/plotly/plotly.js/pull/8039)], with thanks to @Dmao233 for the contribution!

src/components/legend/style.js

@@ -387,15 +387,25 @@ module.exports = function style(s, gd, legend) {
 
             var markerPattern = marker.pattern;
             var pAttr = Drawing.getPatternAttr;
-            var patternShape = markerPattern && (pAttr(markerPattern.shape, 0, '') || pAttr(markerPattern.path, 0, ''));
+            let patternIndex = 0;
+            if (legend._inHover && d0._distinct && d0.index != null) {
+                patternIndex = d0.index;
+            }
+            const patternShape =
+                markerPattern &&
+                (pAttr(markerPattern.shape, patternIndex, '') || pAttr(markerPattern.path, patternIndex, ''));
 
             if (patternShape) {
-                var patternBGColor = pAttr(markerPattern.bgcolor, 0, null);
-                var patternFGColor = pAttr(markerPattern.fgcolor, 0, null);
+                const patternBGColor = pAttr(markerPattern.bgcolor, patternIndex, null);
+                const patternFGColor = pAttr(markerPattern.fgcolor, patternIndex, null);
                 var patternFGOpacity = markerPattern.fgopacity;
-                var patternSize = dimAttr(markerPattern.size, 8, 10);
-                var patternSolidity = dimAttr(markerPattern.solidity, 0.5, 1);
-                var patternID = 'legend-' + trace.uid;
+                const patternSize = legend._inHover
+                    ? dimAttr(pAttr(markerPattern.size, patternIndex, 8), 8, 10)
+                    : dimAttr(markerPattern.size, 8, 10);
+                const patternSolidity = legend._inHover
+                    ? dimAttr(pAttr(markerPattern.solidity, patternIndex, 0.5), 0.5, 1)
+                    : dimAttr(markerPattern.solidity, 0.5, 1);
+                const patternID = legend._inHover ? `hover-${trace.uid}-${patternIndex}` : `legend-${trace.uid}`;
                 p.call(
                     Drawing.pattern,
                     'legend',

test/jasmine/tests/hover_test.js

@@ -7141,6 +7141,76 @@ describe('hovermode: (x|y)unified', function () {
             .then(done, done.fail);
     });
 
+    it('should style bar pattern swatches from the hovered point', async () => {
+        const getSwatch = () => getHoverLabel().select('g.legendpoints path');
+
+        const getPatternId = (fill) => {
+            const match = /url\(["']?#([^"')]+)["']?\)/.exec(fill);
+            return match ? match[1] : null;
+        };
+
+        const getPatternStroke = (patternId) => {
+            const pattern = document.getElementById(patternId);
+            if (!pattern) return null;
+            const painted = pattern.querySelector('path, circle');
+            return painted ? painted.getAttribute('stroke') || painted.getAttribute('fill') : null;
+        };
+
+        const getSwatchStroke = () => getPatternStroke(getPatternId(getSwatch().node().style.fill));
+
+        await Plotly.newPlot(
+            gd,
+            [
+                {
+                    type: 'bar',
+                    x: [0, 1],
+                    y: [1, 2],
+                    marker: {
+                        color: ['red', 'purple'],
+                        pattern: { shape: ['/', '\\'] }
+                    }
+                }
+            ],
+            {
+                hovermode: 'x unified',
+                showlegend: false,
+                width: 400,
+                height: 400,
+                margin: { t: 50, b: 50, l: 50, r: 50 }
+            }
+        );
+
+        _hover(gd, { xval: 0 });
+        assertLabel({ title: '0', items: ['1'] });
+
+        const patternId0 = getPatternId(getSwatch().node().style.fill);
+        expect(patternId0).toBeTruthy('first bar swatch uses a pattern fill');
+        expect(getPatternStroke(patternId0)).toBe('rgb(255, 0, 0)');
+
+        _hover(gd, { xval: 1 });
+        assertLabel({ title: '1', items: ['2'] });
+
+        const patternId1 = getPatternId(getSwatch().node().style.fill);
+        expect(patternId1).toBeTruthy('second bar swatch uses a pattern fill');
+        expect(patternId1).not.toBe(patternId0);
+        expect(getPatternStroke(patternId1)).toBe('rgb(128, 0, 128)');
+
+        await Plotly.restyle(gd, 'marker.pattern.fgcolor', [['blue', 'green']]);
+
+        _hover(gd, { xval: 0 });
+        expect(getSwatchStroke()).toBe('rgb(0, 0, 255)');
+
+        _hover(gd, { xval: 1 });
+        expect(getSwatchStroke()).toBe('rgb(0, 128, 0)');
+
+        await Plotly.restyle(gd, 'marker.pattern.shape', [['/', '']]);
+
+        _hover(gd, { xval: 1 });
+        assertLabel({ title: '1', items: ['2'] });
+        expect(getSwatch().node().style.fill).toBe('rgb(128, 0, 128)');
+        expect(getPatternId(getSwatch().node().style.fill)).toBe(null);
+    });
+
     it('should style funnel symbols accordingly', function (done) {
         var mock = require('../../image/mocks/funnel_custom.json');
         var mockCopy = Lib.extendDeep({}, mock);