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>

index.template.html

@@ -12,12 +12,13 @@
           window.location = loc.replace("http:","https:");
         }
         // if we're still here, load google analytics
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-        ga('create', 'UA-69475841-3', 'auto');
-        ga('send', 'pageview');
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+		ga('create', 'UA-69475841-3', 'auto');
+		ga('send', 'pageview');
       }());
     </script>
 

package.json

@@ -8,12 +8,12 @@
     "copy:chroma": "shx cp node_modules/chroma-js/chroma.min.js lib/vendor",
     "localize": "node tools/make-locales",
     "prebuild": "node tools/buildmark -- set",
-    "build": "run-s bootstrap less build:** default",
     "default": "node tools/copy-default-locale",
     "postbuild": "node tools/buildmark -- resolve",
     "makehandlers": "node tools/aggregate-js-handlers",
     "makeindex": "node tools/form-section-index-files",
-    "build:en-GB": "webpack -p",
+    "build": "run-s bootstrap less build:** default",
+    "build:en-GB": "webpack",
     "build:zh-CN": "cross-env LOCALE=zh-CN webpack -p",
     "build:ja-JP": "cross-env LOCALE=ja-JP webpack -p",
     "dev": "npm run bootstrap && npm run less && webpack-dev-server --progress --colors --hot --inline",