Merge pull request #831 from plotly/layout-images-on-subplots

Layout images on subplots

Author: etpinard

src/components/images/draw.js

@@ -104,14 +104,14 @@ module.exports = function draw(gd) {
             height = yref ? Math.abs(yref.l2p(d.sizey) - yref.l2p(0)) : d.sizey * size.h;
 
         // Offsets for anchor positioning
-        var xOffset = width * anchors.x[d.xanchor].offset + size.l,
-            yOffset = height * anchors.y[d.yanchor].offset + size.t;
+        var xOffset = width * anchors.x[d.xanchor].offset,
+            yOffset = height * anchors.y[d.yanchor].offset;
 
         var sizing = anchors.x[d.xanchor].sizing + anchors.y[d.yanchor].sizing;
 
         // Final positions
-        var xPos = (xref ? xref.l2p(d.x) : d.x * size.w) + xOffset,
-            yPos = (yref ? yref.l2p(d.y) : size.h - d.y * size.h) + yOffset;
+        var xPos = (xref ? xref.l2p(d.x) + xref._offset : d.x * size.w + size.l) + xOffset,
+            yPos = (yref ? yref.l2p(d.y) + yref._offset : size.h - d.y * size.h + size.t) + yOffset;
 
 
         // Construct the proper aspectRatio attribute

test/image/baselines/layout_image.png

@@ -3,9 +3,19 @@
     {
       "x": [1,2,3],
       "y": [1,2,3]
+    }, {
+      "x": [1,2,3],
+      "y": [1,2,3],
+      "yaxis": "y2"
     }
   ],
   "layout": {
+    "yaxis": {
+        "domain": [0, 0.5]
+    },
+    "yaxis2": {
+        "domain": [0.5, 1]
+    },
     "images": [
       {
         "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
@@ -32,7 +42,7 @@
       {
         "source": "https://images.plot.ly/language-icons/api-home/r-logo.png",
         "xref": "x",
-        "yref": "y",
+        "yref": "y2",
         "x": 1,
         "y": 3,
         "sizex": 2,