fix ROI shift issue when saving svg (igvteam#1742)

* fix ROI shift issue when saving svg

* cleaner solution suggested by Turner

Author: wilsonGen

js/browser.js

@@ -380,7 +380,7 @@ class Browser {
      */
     toSVG() {
 
-        const {y, width, height} = this.columnContainer.getBoundingClientRect()
+        const {x, y, width, height} = this.columnContainer.getBoundingClientRect()
 
         const h_render = 8000
 
@@ -412,6 +412,8 @@ class Browser {
             trackView.renderSVGContext(context, delta)
         }
 
+        // ROI -> SVG
+        delta.deltaX = x
         this.roiManager.renderSVGContext(context, delta)
 
         // reset height to trim away unneeded svg canvas real estate. Yes, a bit of a hack.

js/roi/ROIManager.js

@@ -237,13 +237,13 @@ class ROIManager {
             // body
             const { x, y, width, height } = regionElement.getBoundingClientRect()
             context.fillStyle = regionElement.style.backgroundColor
-            context.fillRect(x+deltaX, y+deltaY, width, height)
+            context.fillRect(x-deltaX, y+deltaY, width, height)
 
             // header
             const header = regionElement.querySelector('div')
             const { x:xx, y:yy, width:ww, height:hh } = header.getBoundingClientRect()
             context.fillStyle = header.style.backgroundColor
-            context.fillRect(xx+deltaX, yy+deltaY, ww, hh)
+            context.fillRect(xx-deltaX, yy+deltaY, ww, hh)
         }
     }