let's unbreak interactive graphics

components/gfx-api.js

@@ -2,15 +2,6 @@ var hasWindow = (typeof window !== "undefined");
 var chroma = hasWindow && window.chroma? window.chroma : require("chroma-js");
 var Bezier = hasWindow && window.Bezier? window.Bezier : require("bezier-js");
 
-// event coordinate fix
-var fix = function(e) {
-  e = e || window.event;
-  var target = e.target || e.srcElement,
-      rect = target.getBoundingClientRect();
-  e.offsetX = e.clientX - rect.left;
-  e.offsetY = e.clientY - rect.top;
-};
-
 var API = {
   Paper: false,
 
@@ -49,9 +40,8 @@ var API = {
   redraw: function() { if (this.props.draw) { this.props.draw(this, this.curve); }},
 
   mouseDown: function(evt) {
-    fix(evt);
-    this.mx = evt.offsetX;
-    this.my = evt.offsetY;
+    this.mx = evt.fixedOffsetX;
+    this.my = evt.fixedOffsetY;
 
     this.movingPoint = false;
     this.dragging = false;
@@ -77,8 +67,6 @@ var API = {
   },
 
   mouseMove: function(evt) {
-    fix(evt);
-
     if(!this.props.static) {
 
       if (this.down) {
@@ -87,8 +75,8 @@ var API = {
 
       var found = false;
       this.lpts.forEach(p => {
-        var mx = evt.offsetX;
-        var my = evt.offsetY;
+        var mx = evt.fixedOffsetX;
+        var my = evt.fixedOffsetY;
         if(Math.abs(mx-p.x)<10 && Math.abs(my-p.y)<10) {
           found = found || true;
         }
@@ -96,13 +84,13 @@ var API = {
       this.cvs.style.cursor = found ? "pointer" : "default";
 
       this.hover = {
-        x: evt.offsetX,
-        y: evt.offsetY
+        x: evt.fixedOffsetX,
+        y: evt.fixedOffsetY
       };
 
       if(this.movingPoint) {
-        this.ox = evt.offsetX - this.mx;
-        this.oy = evt.offsetY - this.my;
+        this.ox = evt.fixedOffsetX - this.mx;
+        this.oy = evt.fixedOffsetY - this.my;
         this.mp.x = Math.max(0, Math.min(this.defaultWidth, this.cx + this.ox));
         this.mp.y = Math.max(0, Math.min(this.defaultHeight, this.cy + this.oy));
         if (this.curve.forEach) {
@@ -147,9 +135,8 @@ var API = {
   },
 
   onClick: function(evt) {
-    fix(evt);
-    this.mx = evt.offsetX;
-    this.my = evt.offsetY;
+    this.mx = evt.fixedOffsetX;
+    this.my = evt.fixedOffsetY;
     if (!this.dragging && this.props.onClick) {
       this.props.onClick(evt, this);
     }

components/sections/circles/content.en-GB.md

@@ -101,14 +101,14 @@ And the distance between these two is the standard Euclidean distance:
 So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?
 
 <table><tbody><tr><td>
-  <img src="images/arc-q-pi.gif" height="190px"/>
+  <img src="images/arc-q-pi.gif" height="190"/>
   plotted for 0 ≤ φ ≤ π:
 </td><td>
-  <img src="images/arc-q-pi2.gif" height="187px"/>
+  <img src="images/arc-q-pi2.gif" height="187"/>
   plotted for 0 ≤ φ ≤ ½π:
 </td><td>
   { this.props.showhref ? "http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4" : null }
-  <img src="images/arc-q-pi4.gif" height="174px"/>
+  <img src="images/arc-q-pi4.gif" height="174"/>
   plotted for 0 ≤ φ ≤ ¼π:
 </td></tr></tbody></table>
 

components/sections/circles_cubic/content.en-GB.md

@@ -21,13 +21,13 @@ Unlike for the quadratic curve, we can't use <i>t=0.5</i> as our reference point
 So instead of walking you through the derivation for that value, let's simply take that <i>t</i> value and see what the error is for circular arcs with an angle ranging from 0 to 2π:
 
 <table><tbody><tr><td>
-  <img src="images/arc-c-2pi.gif" height="187px"/>
+  <img src="images/arc-c-2pi.gif" height="187"/>
   plotted for 0 ≤ φ ≤ 2π:
 </td><td>
-  <img src="images/arc-c-pi.gif" height="187px"/>
+  <img src="images/arc-c-pi.gif" height="187"/>
   plotted for 0 ≤ φ ≤ π:
 </td><td>
-  <img src="images/arc-c-pi2.gif" height="187px"/>
+  <img src="images/arc-c-pi2.gif" height="187"/>
   plotted for 0 ≤ φ ≤ ½π:
 </td></tr></tbody></table>
 

components/sections/shapes/content.en-GB.md

@@ -21,19 +21,19 @@ Once we have all the new poly-Bézier curves, we run the first step of the desir
 
 <table className="sketch"><tbody><tr>
   <td className="labeled-image">
-    <img src="images/op_base.gif" height="169px"/>
+    <img src="images/op_base.gif" height="169"/>
     Two overlapping shapes.
   </td>
   <td className="labeled-image">
-    <img src="images/op_union.gif" height="169px"/>
+    <img src="images/op_union.gif" height="169"/>
     The unified region.
   </td>
   <td className="labeled-image">
-    <img src="images/op_intersection.gif" height="169px"/>
+    <img src="images/op_intersection.gif" height="169"/>
     Their intersection.
   </td>
   <td className="labeled-image">
-    <img src="images/op_exclusion.gif" height="169px"/>
+    <img src="images/op_exclusion.gif" height="169"/>
     Their exclusion regions.
   </td>
 </tr></tbody></table>