Support retina displays

hammerlab · Sep 29, 2015 · d5fc720 · d5fc720
1 parent 96cf5c6
commit d5fc720
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 13 deletions.
diff --git a/src/main/CoverageTrack.js b/src/main/CoverageTrack.js
@@ -107,7 +107,7 @@ class CoverageTrack extends React.Component {
 
     // Hold off until height & width are known.
     if (width === 0) return;
-    d3utils.setAttributes(canvas, {width, height});
+    d3utils.sizeCanvas(canvas, width, height);
 
     var yScale = d3.scale.linear()
       .domain([this.state.maxCoverage, 0])

diff --git a/src/main/GeneTrack.js b/src/main/GeneTrack.js
@@ -118,7 +118,7 @@ var GeneTrack = React.createClass({
             .range([0, width])
             .clamp(true);
 
-    d3utils.setAttributes(canvas, {width, height});
+    d3utils.sizeCanvas(canvas, width, height);
 
     var ctx = dataCanvas.getDataContext(canvasUtils.getContext(canvas));
     ctx.reset();

diff --git a/src/main/GenomeTrack.js b/src/main/GenomeTrack.js
@@ -53,7 +53,7 @@ var GenomeTrack = React.createClass({
 
     // Hold off until height & width are known.
     if (width === 0) return;
-    d3utils.setAttributes(canvas, {width, height});
+    d3utils.sizeCanvas(canvas, width, height);
 
     var scale = this.getScale();
     var pxPerLetter = scale(1) - scale(0);

diff --git a/src/main/LocationTrack.js b/src/main/LocationTrack.js
@@ -49,7 +49,7 @@ class LocationTrack extends React.Component {
         {range, width, height} = this.props,
         scale = this.getScale();
 
-    d3utils.setAttributes(canvas, {width, height});
+    d3utils.sizeCanvas(canvas, width, height);
 
     var ctx = dataCanvas.getDataContext(canvasUtils.getContext(this.getDOMNode()));
     ctx.save();

diff --git a/src/main/PileupTrack.js b/src/main/PileupTrack.js
@@ -265,7 +265,7 @@ class PileupTrack extends React.Component {
     // Height can only be computed after the pileup has been updated.
     var height = yForRow(this.cache.pileupHeightForRef(this.props.range.contig));
 
-    d3utils.setAttributes(canvas, {width, height});
+    d3utils.sizeCanvas(canvas, width, height);
 
     var ctx = canvasUtils.getContext(canvas);
     var dtx = dataCanvas.getDataContext(ctx);

diff --git a/src/main/ScaleTrack.js b/src/main/ScaleTrack.js
@@ -51,7 +51,7 @@ class ScaleTrack extends React.Component {
     var canvas = this.getDOMNode(),
         {range, width, height} = this.props;
 
-    d3utils.setAttributes(canvas, {width, height});
+    d3utils.sizeCanvas(canvas, width, height);
 
     var ctx = dataCanvas.getDataContext(canvasUtils.getContext(canvas));
     ctx.save();

diff --git a/src/main/VariantTrack.js b/src/main/VariantTrack.js
@@ -55,7 +55,7 @@ var VariantTrack = React.createClass({
     // Hold off until height & width are known.
     if (width === 0) return;
 
-    d3utils.setAttributes(canvas, {width, height});
+    d3utils.sizeCanvas(canvas, width, height);
     var ctx = canvasUtils.getContext(canvas);
     var dtx = dataCanvas.getDataContext(ctx);
     this.renderScene(dtx);

diff --git a/src/main/d3utils.js b/src/main/d3utils.js
@@ -34,17 +34,22 @@ function formatRange(viewSize: number): any {
 }
 
 /**
- * Set attributes on an element. This can be used in place of, e.g.
- * d3.select(div).attr({width, height});
+ * Sizes a canvas appropriately for this device.
  */
-function setAttributes(el: Element, attrs: {[key:string]: any}) {
-  for (var k in attrs) {
-    el.setAttribute(k, attrs[k]);
+function sizeCanvas(el: HTMLCanvasElement, width: number, height: number) {
+  var ratio = window.devicePixelRatio;
+  el.width = width * ratio;
+  el.height = height * ratio;
+  el.style.width = width + 'px';
+  el.style.height = height + 'px';
+  var ctx = el.getContext('2d');
+  if (ctx != null && ctx instanceof CanvasRenderingContext2D) {
+    ctx.scale(ratio, ratio);
   }
 }
 
 module.exports = {
   formatRange,
   getTrackScale,
-  setAttributes
+  sizeCanvas
 };