From 2f79606d9b4e8c2d7d732504c118d83d9e875457 Mon Sep 17 00:00:00 2001
From: Phil <philipp.reither@gmail.com>
Date: Wed, 28 Oct 2015 17:09:06 +0000
Subject: [PATCH] All callbacks now have their coordinates scaled if retina.

Previously only the `.draw` callback had it's coodinate system scaled, when in retina land. This meant that the coordinate system was inconsistent between, for example, `.draw` and `.update`.

This fix adds scaling to `.update` and all other callbacks (such as `mouseover`, `click`, ...).
---
 js/sketch.js     | 33 ++++++++++++++++++++++-----------
 js/sketch.min.js |  2 +-
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/js/sketch.js b/js/sketch.js
index dc1347d..9ba40d8 100755
--- a/js/sketch.js
+++ b/js/sketch.js
@@ -207,15 +207,34 @@
 
                 node = eventMap[ index ];
 
+                var retinaScaleWrapper = function (fn) {
+
+                    return function () {
+
+                        context.save();
+                        context.scale( ratio, ratio );
+
+                        var result = fn.apply(this, arguments);
+
+                        context.restore();
+
+                        return result;
+                    };
+                };
+
                 if ( isString( node ) )
 
                     target[ ( on ? 'add' : 'remove' ) + 'EventListener' ].call( target, node, handler, false );
 
-                else if ( isFunction( node ) )
+                else if ( isFunction( node ) ) {
+
+                    if ( is2D && context.retina )
+
+                        node = retinaScaleWrapper( node );
 
                     handler = node;
 
-                else target = node;
+                } else target = node;
             }
         }
 
@@ -241,8 +260,6 @@
                 context.millis += context.dt;
                 context.now = clock;
 
-                trigger( context.update );
-
                 // Pre draw
 
                 if ( is2D ) {
@@ -260,6 +277,7 @@
 
                 // Draw
 
+                trigger( context.update );
                 trigger( context.draw );
 
                 // Post draw
@@ -313,13 +331,6 @@
             touch.x = touch.pageX - bounds.left - (win.scrollX || win.pageXOffset);
             touch.y = touch.pageY - bounds.top - (win.scrollY || win.pageYOffset);
 
-            if ( context.retina && is2D && ratio ) {
-
-                touch.x *= ratio;
-                touch.y *= ratio;
-
-            }
-
             return touch;
         }
 
diff --git a/js/sketch.min.js b/js/sketch.min.js
index 8ec8fd7..dfdc25a 100644
--- a/js/sketch.min.js
+++ b/js/sketch.min.js
@@ -1,2 +1,2 @@
 /* Copyright (C) 2013 Justin Windle, http://soulwire.co.uk */
-!function(e,t){"object"==typeof exports?module.exports=t(e,e.document):"function"==typeof define&&define.amd?define(function(){return t(e,e.document)}):e.Sketch=t(e,e.document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(e){return"[object Array]"==Object.prototype.toString.call(e)}function o(e){return"function"==typeof e}function r(e){return"number"==typeof e}function i(e){return"string"==typeof e}function u(e){return C[e]||String.fromCharCode(e)}function a(e,t,n){for(var o in t)!n&&o in e||(e[o]=t[o]);return e}function c(e,t){return function(){e.apply(t,arguments)}}function s(e){var t={};for(var n in e)o(e[n])?t[n]=c(e[n],e):t[n]=e[n];return t}function l(e){function t(t){o(t)&&t.apply(e,[].splice.call(arguments,1))}function n(e){for(_=0;_<ee.length;_++)B=ee[_],i(B)?O[(e?"add":"remove")+"EventListener"].call(O,B,k,!1):o(B)?k=B:O=B}function r(){L(S),S=I(r),K||(t(e.setup),K=o(e.setup)),U||(t(e.resize),U=o(e.resize)),e.running&&!Y&&(e.dt=(z=+new Date)-e.now,e.millis+=e.dt,e.now=z,t(e.update),Z&&(e.retina&&(e.save(),e.scale(V,V)),e.autoclear&&e.clear()),t(e.draw),Z&&e.retina&&e.restore()),Y=++Y%e.interval}function c(){O=J?e.style:e.canvas,D=J?"px":"",Q=e.width,X=e.height,e.fullscreen&&(X=e.height=v.innerHeight,Q=e.width=v.innerWidth),e.retina&&Z&&V&&(O.style.height=X+"px",O.style.width=Q+"px",Q*=V,X*=V),O.height!==X&&(O.height=X+D),O.width!==Q&&(O.width=Q+D),K&&t(e.resize)}function l(t,n){return N=n.getBoundingClientRect(),t.x=t.pageX-N.left-(v.scrollX||v.pageXOffset),t.y=t.pageY-N.top-(v.scrollY||v.pageYOffset),e.retina&&Z&&V&&(t.x*=V,t.y*=V),t}function f(t,n){return l(t,e.element),n=n||{},n.ox=n.x||t.x,n.oy=n.y||t.y,n.x=t.x,n.y=t.y,n.dx=n.x-n.ox,n.dy=n.y-n.oy,n}function d(e){if(e.preventDefault(),G=s(e),G.originalEvent=e,G.touches)for(M.length=G.touches.length,_=0;_<G.touches.length;_++)M[_]=f(G.touches[_],M[_]);else M.length=0,M[0]=f(G,$);return a($,M[0],!0),G}function g(n){for(n=d(n),j=(q=ee.indexOf(W=n.type))-1,e.dragging=/down|start/.test(W)?!0:/up|end/.test(W)?!1:e.dragging;j;)i(ee[j])?t(e[ee[j--]],n):i(ee[q])?t(e[ee[q++]],n):j=0}function p(n){F=n.keyCode,H="keyup"==n.type,te[F]=te[u(F)]=!H,t(e[n.type],n)}function m(n){e.autopause&&("blur"==n.type?b:y)(),t(e[n.type],n)}function y(){e.now=+new Date,e.running=!0}function b(){e.running=!1}function P(){(e.running?b:y)()}function T(){Z&&e.clearRect(0,0,e.width,e.height)}function A(){R=e.element.parentNode,_=E.indexOf(e),R&&R.removeChild(e.element),~_&&E.splice(_,1),n(!1),b()}var S,k,O,R,N,_,D,z,B,G,W,F,H,j,q,Q,X,Y=0,M=[],U=!1,K=!1,V=v.devicePixelRatio||1,J=e.type==x,Z=e.type==h,$={x:0,y:0,ox:0,oy:0,dx:0,dy:0},ee=[e.eventTarget||e.element,g,"mousedown","touchstart",g,"mousemove","touchmove",g,"mouseup","touchend",g,"click",g,"mouseout",g,"mouseover",w,p,"keydown","keyup",v,m,"focus","blur",c,"resize"],te={};for(F in C)te[C[F]]=!1;return a(e,{touches:M,mouse:$,keys:te,dragging:!1,running:!1,millis:0,now:0/0,dt:0/0,destroy:A,toggle:P,clear:T,start:y,stop:b}),E.push(e),e.autostart&&y(),n(!0),c(),r(),e}for(var f,d,g="E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min".split(" "),p="__hasSketch",m=Math,h="canvas",y="webgl",x="dom",w=t,v=e,E=[],b={fullscreen:!0,autostart:!0,autoclear:!0,autopause:!0,container:w.body,interval:1,globals:!0,retina:!1,type:h},C={8:"BACKSPACE",9:"TAB",13:"ENTER",16:"SHIFT",27:"ESCAPE",32:"SPACE",37:"LEFT",38:"UP",39:"RIGHT",40:"DOWN"},P={CANVAS:h,WEB_GL:y,WEBGL:y,DOM:x,instances:E,install:function(e){if(!e[p]){for(var t=0;t<g.length;t++)e[g[t]]=m[g[t]];a(e,{TWO_PI:2*m.PI,HALF_PI:m.PI/2,QUARTER_PI:m.PI/4,random:function(e,t){return n(e)?e[~~(m.random()*e.length)]:(r(t)||(t=e||1,e=0),e+m.random()*(t-e))},lerp:function(e,t,n){return e+n*(t-e)},map:function(e,t,n,o,r){return(e-t)/(n-t)*(r-o)+o}}),e[p]=!0}},create:function(e){return e=a(e||{},b),e.globals&&P.install(self),f=e.element=e.element||w.createElement(e.type===x?"div":"canvas"),d=e.context=e.context||function(){switch(e.type){case h:return f.getContext("2d",e);case y:return f.getContext("webgl",e)||f.getContext("experimental-webgl",e);case x:return f.canvas=f}}(),(e.container||w.body).appendChild(f),P.augment(d,e)},augment:function(e,t){return t=a(t||{},b),t.element=e.canvas||e,t.element.className+=" sketch",a(e,t,!0),l(e)}},T=["ms","moz","webkit","o"],A=self,S=0,k="AnimationFrame",O="request"+k,R="cancel"+k,I=A[O],L=A[R],N=0;N<T.length&&!I;N++)I=A[T[N]+"Request"+k],L=A[T[N]+"Cancel"+k];return A[O]=I=I||function(e){var t=+new Date,n=m.max(0,16-(t-S)),o=setTimeout(function(){e(t+n)},n);return S=t+n,o},A[R]=L=L||function(e){clearTimeout(e)},P});
\ No newline at end of file
+!function(e,t){"object"==typeof exports?module.exports=t(e,e.document):"function"==typeof define&&define.amd?define(function(){return t(e,e.document)}):e.Sketch=t(e,e.document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(e){return"[object Array]"==Object.prototype.toString.call(e)}function o(e){return"function"==typeof e}function r(e){return"number"==typeof e}function i(e){return"string"==typeof e}function u(e){return C[e]||String.fromCharCode(e)}function a(e,t,n){for(var o in t)!n&&o in e||(e[o]=t[o]);return e}function c(e,t){return function(){e.apply(t,arguments)}}function s(e){var t={};for(var n in e)"webkitMovementX"!==n&&"webkitMovementY"!==n&&(o(e[n])?t[n]=c(e[n],e):t[n]=e[n]);return t}function l(e){function t(t){o(t)&&t.apply(e,[].splice.call(arguments,1))}function n(t){for(_=0;_<ee.length;_++){B=ee[_];var n=function(t){return function(){e.save(),e.scale(V,V);var n=t.apply(this,arguments);return e.restore(),n}};i(B)?O[(t?"add":"remove")+"EventListener"].call(O,B,S,!1):o(B)?(Z&&e.retina&&(B=n(B)),S=B):O=B}}function r(){L(A),A=I(r),K||(t(e.setup),K=o(e.setup)),U||(t(e.resize),U=o(e.resize)),e.running&&!q&&(e.dt=(z=+new Date)-e.now,e.millis+=e.dt,e.now=z,Z&&(e.retina&&(e.save(),e.scale(V,V)),e.autoclear&&e.clear()),t(e.update),t(e.draw),Z&&e.retina&&e.restore()),q=++q%e.interval}function c(){O=J?e.style:e.canvas,D=J?"px":"",Y=e.width,j=e.height,e.fullscreen&&(j=e.height=x.innerHeight,Y=e.width=x.innerWidth),e.retina&&Z&&V&&(O.style.height=j+"px",O.style.width=Y+"px",Y*=V,j*=V),O.height!==j&&(O.height=j+D),O.width!==Y&&(O.width=Y+D),K&&t(e.resize)}function l(e,t){return N=t.getBoundingClientRect(),e.x=e.pageX-N.left-(x.scrollX||x.pageXOffset),e.y=e.pageY-N.top-(x.scrollY||x.pageYOffset),e}function f(t,n){return l(t,e.element),n=n||{},n.ox=n.x||t.x,n.oy=n.y||t.y,n.x=t.x,n.y=t.y,n.dx=n.x-n.ox,n.dy=n.y-n.oy,n}function d(e){if(e.preventDefault(),G=s(e),G.originalEvent=e,G.touches)for(Q.length=G.touches.length,_=0;_<G.touches.length;_++)Q[_]=f(G.touches[_],Q[_]);else Q.length=0,Q[0]=f(G,$);return a($,Q[0],!0),G}function p(n){for(n=d(n),M=(X=ee.indexOf(W=n.type))-1,e.dragging=/down|start/.test(W)?!0:/up|end/.test(W)?!1:e.dragging;M;)i(ee[M])?t(e[ee[M--]],n):i(ee[X])?t(e[ee[X++]],n):M=0}function g(n){F=n.keyCode,H="keyup"==n.type,te[F]=te[u(F)]=!H,t(e[n.type],n)}function m(n){e.autopause&&("blur"==n.type?E:y)(),t(e[n.type],n)}function y(){e.now=+new Date,e.running=!0}function E(){e.running=!1}function k(){(e.running?E:y)()}function P(){Z&&e.clearRect(0,0,e.width,e.height)}function T(){R=e.element.parentNode,_=b.indexOf(e),R&&R.removeChild(e.element),~_&&b.splice(_,1),n(!1),E()}var A,S,O,R,N,_,D,z,B,G,W,F,H,M,X,Y,j,q=0,Q=[],U=!1,K=!1,V=x.devicePixelRatio||1,J=e.type==v,Z=e.type==h,$={x:0,y:0,ox:0,oy:0,dx:0,dy:0},ee=[e.eventTarget||e.element,p,"mousedown","touchstart",p,"mousemove","touchmove",p,"mouseup","touchend",p,"click",p,"mouseout",p,"mouseover",w,g,"keydown","keyup",x,m,"focus","blur",c,"resize"],te={};for(F in C)te[C[F]]=!1;return a(e,{touches:Q,mouse:$,keys:te,dragging:!1,running:!1,millis:0,now:0/0,dt:0/0,destroy:T,toggle:k,clear:P,start:y,stop:E}),b.push(e),e.autostart&&y(),n(!0),c(),r(),e}for(var f,d,p="E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min".split(" "),g="__hasSketch",m=Math,h="canvas",y="webgl",v="dom",w=t,x=e,b=[],E={fullscreen:!0,autostart:!0,autoclear:!0,autopause:!0,container:w.body,interval:1,globals:!0,retina:!1,type:h},C={8:"BACKSPACE",9:"TAB",13:"ENTER",16:"SHIFT",27:"ESCAPE",32:"SPACE",37:"LEFT",38:"UP",39:"RIGHT",40:"DOWN"},k={CANVAS:h,WEB_GL:y,WEBGL:y,DOM:v,instances:b,install:function(e){if(!e[g]){for(var t=0;t<p.length;t++)e[p[t]]=m[p[t]];a(e,{TWO_PI:2*m.PI,HALF_PI:m.PI/2,QUARTER_PI:m.PI/4,random:function(e,t){return n(e)?e[~~(m.random()*e.length)]:(r(t)||(t=e||1,e=0),e+m.random()*(t-e))},lerp:function(e,t,n){return e+n*(t-e)},map:function(e,t,n,o,r){return(e-t)/(n-t)*(r-o)+o}}),e[g]=!0}},create:function(e){return e=a(e||{},E),e.globals&&k.install(self),f=e.element=e.element||w.createElement(e.type===v?"div":"canvas"),d=e.context=e.context||function(){switch(e.type){case h:return f.getContext("2d",e);case y:return f.getContext("webgl",e)||f.getContext("experimental-webgl",e);case v:return f.canvas=f}}(),(e.container||w.body).appendChild(f),k.augment(d,e)},augment:function(e,t){return t=a(t||{},E),t.element=e.canvas||e,t.element.className+=" sketch",a(e,t,!0),l(e)}},P=["ms","moz","webkit","o"],T=self,A=0,S="AnimationFrame",O="request"+S,R="cancel"+S,I=T[O],L=T[R],N=0;N<P.length&&!I;N++)I=T[P[N]+"Request"+S],L=T[P[N]+"Cancel"+S];return T[O]=I=I||function(e){var t=+new Date,n=m.max(0,16-(t-A)),o=setTimeout(function(){e(t+n)},n);return A=t+n,o},T[R]=L=L||function(e){clearTimeout(e)},k});
\ No newline at end of file