Merge branch 'release/1.1.1'

Fixes #1

Author: jondavidjohn

CHANGELOG

@@ -1,3 +1,9 @@
+= 1.1.1
+  * Configurable tooltip font sizes
+  * Fix mouse position for retina displays - Issue #1
+  * Explicit support for retina (@2x) images
+  * Better Retina support and consistency in general
+
 = 1.1.0
   * Move the requestAnimationFrame and general performance enhancements
   * Implement Images support in bubbles

README.md

@@ -44,10 +44,12 @@ This is the exploded view of possbile options (with included defaults)
   textColor: "#fff"     // Bubble label color
   textType: "helvetica" // Font
 
-  popoverOpts: {        // Control the look of the hover popover
+  popoverOpts: {           // Control the look of the hover popover
     textFont: 'helvetica',
     textColor: '#fff',
     fillColor: '#333',
+    labelSize: 22,         // Popover Heading size
+    metricSize: 14,        // Popover Metric size
     opacity: 0.6,
   }
 }
@@ -97,6 +99,14 @@ Example of a data object with an image covering 60% of the bubble:
 }
 ```
 
+##### Retina
+
+If your `img_src` value contains `@2x` it will be treated as a retina image and
+be downsized (by 2) for display.
+
+If you do not specify `@2x` images, and the client pixel density is greater
+than 1, this module will reduce the image size to prefer image clarity over size.
+
 #### Loading Spinner
 
 There is a provided Spinner object you can use to show a loading animation if

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bubblechart",
   "description": "BubbleChart is a JavaScript module for the comparative visualization of two dimensional data in a bubble chart.",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "Apache 2.0",
   "homepage": "https://github.com/jondavidjohn/bubblechart",
   "bugs": "https://github.com/jondavidjohn/bubblechart/issues",

src/classes/BubbleChart.coffee

@@ -34,16 +34,11 @@ class @BubbleChart
       c.context = c.getContext '2d'
 
       # Adjust for retina if needed
-      ratio = 1
-      if window.devicePixelRatio? and window.devicePixelRatio > 1
-        if c.context.webkitBackingStorePixelRatio == 2
-          window.devicePixelRatio = 1
-
-      if window.devicePixelRatio > 1
-        c.style.height = "#{c.height}px"
-        c.style.width = "#{c.width}px"
-        c.width = c.width * ratio
-        c.height = c.height * ratio
+      ratio = BubbleChart.getPixelRatio c.context
+      c.style.height = "#{c.height}px"
+      c.style.width = "#{c.width}px"
+      c.width = c.width * ratio
+      c.height = c.height * ratio
 
       # Attach Canvas Mouse/Touch events
       c.style.position = "relative"
@@ -62,6 +57,18 @@ class @BubbleChart
     if @data.length
       @reload()
 
+  @getBackingStoreRatio: (context) ->
+    context.webkitBackingStorePixelRatio or
+    context.mozBackingStorePixelRatio or
+    context.msBackingStorePixelRatio or
+    context.oBackingStorePixelRatio or
+    context.backingStorePixelRatio or 1
+
+  @getPixelRatio: (context) ->
+    ratio = window.devicePixelRatio or 1
+    backingStoreRatio = BubbleChart.getBackingStoreRatio(context)
+    ratio / backingStoreRatio
+
   reload: () ->
     @bubbles = []
     @metricTotal = (d.data for d in @data).reduce (a, b) -> a + b

src/classes/BubbleChart/Bubble.coffee

@@ -105,16 +105,25 @@ class BubbleChart.Bubble
   render: () ->
     if @img_src?
       @img.onload = () =>
+        canvas = document.createElement 'canvas'
+        ctx = canvas.getContext '2d'
+        bsRatio = BubbleChart.getBackingStoreRatio ctx
+
+        if @img_src.indexOf('@2x') is not -1
+          @img.height = @img.height / 2
+          @img.width = @img.width / 2
+        else if bsRatio > 1
+          @img.height = @img.height / bsRatio
+          @img.width = @img.width / bsRatio
+
         while @img.width > @diameter * @img_area
           @img.height = @img.height * 0.75
           @img.width = @img.width * 0.75
-        canvas = document.createElement 'canvas'
         canvas.height = @img.height
         canvas.width = @img.width + 2
         img_arc_x = @img.width / 2 + 2
         img_arc_y = @img.height / 2
         img_arc_r = @img.width / 2
-        ctx = canvas.getContext '2d'
         ctx.save()
         ctx.beginPath()
         ctx.arc img_arc_x, img_arc_y, img_arc_r, 0, Math.PI * 2, true
@@ -135,8 +144,9 @@ class BubbleChart.Bubble
         )
       @img.src = @img_src
     @pre = document.createElement 'canvas'
-    @pre.height = @pre.width = (@diameter + 3) * window.devicePixelRatio
     pre_context = @pre.getContext '2d'
+    ratio = BubbleChart.getPixelRatio pre_context
+    @pre.height = @pre.width = (@diameter + 3) * ratio
     pre_context.beginPath()
     pre_context.fillStyle = @fillColor
     pre_context.arc @radius + 1, @radius + 1, @radius, 0, Math.PI * 2, true
@@ -148,15 +158,15 @@ class BubbleChart.Bubble
       pre_context.stroke()
 
     if @textColor
-      pre_context.font = "20px '#{@textFont}'"
+      pre_context.font = "#{20 * ratio}px '#{@textFont}'"
       pre_context.fillStyle = @textColor
       text_measurement = pre_context.measureText @label
       if text_measurement.width + 12 < @diameter
         spacingX = @radius - (text_measurement.width / 2)
         spacingY = @radius + (14 / 2)
         pre_context.fillText @label, spacingX, spacingY
       else
-        pre_context.font = "12px helvetica"
+        pre_context.font = "#{12 * ratio}px helvetica"
         text_measurement = pre_context.measureText @label
         if text_measurement.width + 7 < @diameter
           spacingX = @radius - (text_measurement.width / 2)

src/classes/BubbleChart/Pointer.coffee

@@ -40,19 +40,13 @@ class BubbleChart.Pointer
   grabbingBubble: ->
     @bubble? and @bubble.grabbed
 
-  getPixelRatio: (c) ->
-    ratio = 1
-    if window.devicePixelRatio? and c.context.webkitBackingStorePixelRatio < 2
-        ratio = window.devicePixelRatio
-    ratio
-
   getPosition: do ->
     top = {}
     left = {}
     (e) ->
       element = e.target or e.srcElement
       element_id = element.id
-      pr = @getPixelRatio(element)
+      pr = BubbleChart.getPixelRatio(element.getContext '2d')
       unless top[element_id]? and left[element_id]?
         top[element_id] = 0
         left[element_id] = 0

src/classes/BubbleChart/Popover.coffee

@@ -3,64 +3,106 @@ class BubbleChart.Popover
   constructor : (bubble, o) ->
     @bubble = bubble
     @fillColor = o.fillColor or '#333'
-    @textColor = o.textColor or '#fff'
+    @textColor = o.textColor or '#FFF'
     @textFont = o.textFont or 'helvetica'
     @opacity = o.opacity or 0.8
-    @lineHeight = 20
+    @labelSize = o.labelSize or 18
+    @metricSize = o.metricSize or 12
     @last_draw = null
+    @textDems = {}
+    @pre = null
+
+  getTextDems: (context, text, size, font) ->
+    if not @textDems["#{text}#{size}#{font}"]?
+      # Width is easy
+      context.font = "#{size}px '#{font}'"
+      width = context.measureText(text).width
+
+      # Height is a bit tricky
+      d = document.createElement "span"
+      d.style.fontSize = "#{size}px"
+      d.style.fontFamily = font
+      d.style.visibility = "hidden"
+      d.textContent = text
+      document.body.appendChild d
+      height = d.offsetHeight
+      document.body.removeChild d
+      @textDems["#{text}#{size}#{font}"] =
+        width: width
+        height: height
+    @textDems["#{text}#{size}#{font}"]
+
+  calculateTriangle: (base_width, height, ratio) ->
+    triangle =
+      x: 0, y: 0
+      x2:0, y2:0
+      x3:0, y3:0
 
-  clear: (context) ->
-    if @last_draw?
-      context.clearRect @last_draw.x, @last_draw.y, @last_draw.w, @last_draw.h
-      @last_draw = null
+    triangle.x -= base_width / 2
+    triangle.x2 = triangle.x + base_width / 2
+    triangle.x3 = triangle.x + base_width
+
+    if height > 0
+      triangle.y += height - (26 * ratio)
+    else
+      triangle.y += height + (48 * ratio)
+
+    triangle.y2 = triangle.y + height
+    triangle.y3 = triangle.y
+
+    triangle
 
   paint: (pointer, context) ->
     return unless pointer.current?
+    ratio = BubbleChart.getPixelRatio context
 
-    context.font = "17px '#{@textFont}'"
-    label_measurement = context.measureText @bubble.label
-    metric_measurement = context.measureText "#{@bubble.data} #{@bubble.metric}"
-    lineWidth = if label_measurement.width > metric_measurement.width
-        label_measurement.width + 15
-      else
-        metric_measurement.width + 15
+    labelSize = @labelSize
+    metricSize = @metricSize
+    lr_pad = 8 * ratio
+    tb_pad = 5 * ratio
+    triangle_width = 16 * ratio
+    triangle_height = 8 * ratio
+    metric_text = "#{@bubble.data} #{@bubble.metric}"
 
-    labelX = pointer.current.x - 14
-    labelY = pointer.current.y - 26 - @lineHeight * 2
-    triangle =
-      x: 0, y: 0
-      x2:0, y2:0
-      x3:0, y3:0
+    l_dems = @getTextDems context, @bubble.label, labelSize, @textFont
+    m_dems = @getTextDems context, metric_text, metricSize, @textFont
+
+    lineWidth = (Math.max(l_dems.width, m_dems.width) + (lr_pad * 2)) * ratio
+    lineHeight = Math.max(l_dems.height, m_dems.height) * ratio
+
+    box_height = (lineHeight * 2) + (tb_pad * 2)
+
+    labelX = pointer.current.x - (14 * ratio)
+    labelY = pointer.current.y - box_height - triangle_height - (tb_pad * 2)
 
     if labelY < 0
-      labelY = pointer.current.y + 26
-      triangle.y = pointer.current.y + 26
-      triangle.y3 = triangle.y - 4
+      labelY = pointer.current.y + (40 * ratio)
+      triangle = @calculateTriangle(triangle_width, - triangle_height, ratio)
     else
-      triangle.y  = pointer.current.y - 16
-      triangle.y3 = pointer.current.y - 10
+      triangle = @calculateTriangle(triangle_width, triangle_height, ratio)
 
-    # triangle setup
-    triangle.x  = pointer.current.x - 8
-    triangle.x2 = triangle.x + 16
-    triangle.y2 = triangle.y
-    triangle.x3 = triangle.x2 - 8
+    triangle.x += pointer.current.x
+    triangle.y += pointer.current.y
+    triangle.x2 += pointer.current.x
+    triangle.y2 += pointer.current.y
+    triangle.x3 += pointer.current.x
+    triangle.y3 += pointer.current.y
 
     # right edge case
     if labelX + lineWidth > context.canvas.width
       labelX -= labelX + lineWidth - context.canvas.width
 
+    @last_draw =
+      x: labelX
+      y: labelY - (triangle_height)
+      w: lineWidth + 2
+      h: box_height + (triangle_height * 2)
+
     context.beginPath()
     context.fillStyle = @fillColor
     context.globalAlpha = @opacity
 
-    @last_draw =
-      x: labelX
-      y: labelY
-      w: lineWidth
-      h: @lineHeight * 2 + 10 + (triangle.y3 - triangle.y) + 5
-
-    context.roundedRect labelX, labelY, lineWidth, @lineHeight * 2 + 10, 7
+    context.roundedRect labelX, labelY, lineWidth, box_height, 7 * ratio
 
     context.moveTo triangle.x,  triangle.y
     context.lineTo triangle.x2, triangle.y2
@@ -70,12 +112,20 @@ class BubbleChart.Popover
 
     context.globalAlpha = 1
 
+
     context.fillStyle = @textColor
-    context.fillText @bubble.label, labelX + 7, labelY + @lineHeight
+    context.font = "#{labelSize * ratio}px #{@textFont}"
+    context.fillText @bubble.label, labelX + lr_pad, labelY + lineHeight
 
-    context.font = "11px #{@textFont}"
-    detailX = labelX + 7
-    detailY = labelY + @lineHeight * 2
-    context.fillText "#{@bubble.data} #{@bubble.metric}", detailX, detailY
+    context.font = "#{metricSize * ratio}px #{@textFont}"
+    detailX = labelX + lr_pad
+    detailY = labelY + lineHeight * 2
+    context.fillText metric_text, detailX, detailY
 
     context.closePath()
+
+
+  clear: (context) ->
+    if @last_draw?
+      context.clearRect @last_draw.x, @last_draw.y, @last_draw.w, @last_draw.h
+      @last_draw = null

test/classes/BubbleChart/PointerTest.js

@@ -21,21 +21,6 @@
 		equal(pointer.grabbingBubble(), false);
 	});
 
-	test('getPixelRatio', function() {
-		var pointer = new Pointer(),
-			canvas = document.getElementById('test_canvas');
-
-		canvas.context = canvas.getContext('2d');
-
-		window.devicePixelRatio = 2;
-		canvas.context.webkitBackingStorePixelRatio = 1;
-		equal(pointer.getPixelRatio(canvas), window.devicePixelRatio);
-
-		window.devicePixelRatio = 2;
-		canvas.context.webkitBackingStorePixelRatio = 2;
-		equal(pointer.getPixelRatio(canvas), 1);
-	});
-
 	test('getPosition', function() {
 		var pointer = new Pointer(),
 			element = document.getElementById('test_canvas'),

test/classes/BubbleChart/Popover.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>BubbleChart.Point Tests</title>
+	<link rel="stylesheet" href="qunit/qunit/qunit.css">
+</head>
+<body>
+	<div id="qunit"></div>
+	<div id="qunit-fixture">
+		<canvas id='test_canvas'></canvas>
+	</div>
+	<script src="../../qunit/qunit/qunit.js"></script>
+	<script src="../../../dist/bubblechart.js"></script>
+	<script src="PopoverTest.js"></script>
+</body>
+</html>