Refactor clip path calculation for multi-axis shapes

Author: alexshoe

src/components/shapes/draw.js

@@ -196,13 +196,51 @@ function setClipPath(shapePath, gd, shapeOptions) {
     //
     // if axis is 'paper' or an axis with " domain" appended, then there is no
     // clip axis
-    var clipAxes = (shapeOptions.xref + shapeOptions.yref).replace(/paper/g, '').replace(/[xyz][0-9]* *domain/g, '');
 
-    Drawing.setClipUrl(
-        shapePath,
-        clipAxes ? 'clip' + gd._fullLayout._uid + clipAxes : null,
-        gd
-    );
+    var xref = shapeOptions.xref;
+    var yref = shapeOptions.yref;
+
+    // For multi-axis shapes, create a custom clip path from axis bounds
+    if(Array.isArray(xref) || Array.isArray(yref)) {
+        var clipId = 'clip' + gd._fullLayout._uid + 'shape' + shapeOptions._index;
+        var rect = getMultiAxisClipRect(gd, xref, yref);
+
+        Lib.ensureSingleById(gd._fullLayout._clips, 'clipPath', clipId, function(s) {
+            s.append('rect');
+        }).select('rect').attr(rect);
+
+        Drawing.setClipUrl(shapePath, clipId, gd);
+        return;
+    }
+
+    var clipAxes = (xref + yref).replace(/paper/g, '').replace(/[xyz][0-9]* *domain/g, '');
+    Drawing.setClipUrl(shapePath, clipAxes ? 'clip' + gd._fullLayout._uid + clipAxes : null, gd);
+}
+
+function getMultiAxisClipRect(gd, xref, yref) {
+    var gs = gd._fullLayout._size;
+
+    function getBounds(refs, isVertical) {
+        // Retrieve all existing axes from the references
+        var axes = (Array.isArray(refs) ? refs : [refs])
+            .map(r => Axes.getFromId(gd, r))
+            .filter(Boolean);
+
+        // If no valid axes, return the bounds of the larger plot area
+        if(!axes.length) {
+            return isVertical ? [gs.t, gs.t + gs.h] : [gs.l, gs.l + gs.w];
+        }
+
+        // Otherwise, we find all find and return the smallest start point
+        // and largest end point to be used as the clip bounds
+        var startBounds = axes.map(function(ax) { return ax._offset; });
+        var endBounds = axes.map(function(ax) { return ax._offset + ax._length; });
+        return [Math.min(...startBounds), Math.max(...endBounds)];
+    }
+
+    var xb = getBounds(xref, false);
+    var yb = getBounds(yref, true);
+    return {x: xb[0], y: yb[0], width: xb[1] - xb[0], height: yb[1] - yb[0]};
 }
 
 function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer, editHelpers) {