kineticscroll - Fix wrong appRect handling

apps/kineticscroll/boot.js

@@ -33,12 +33,16 @@
     let lastTouchedDrag = 0;
     let lastDragStart = 0;
 
-    let R = Bangle.appRect;
     let menuScrollMin = 0|options.scrollMin;
-    let menuScrollMax = options.h*options.c - R.h;
+
+    const getMenuScrollMax = () => {
+      let menuScrollMax = options.h*options.c - Bangle.appRect.h;
       if (menuScrollMax<menuScrollMin) menuScrollMax=menuScrollMin;
+      return menuScrollMax;
+    };
 
     const touchHandler = (_,e)=>{
+      let R = Bangle.appRect;
       if (e.y<R.y-4) return;
       velocity = 0;
       accDy = 0;
@@ -51,6 +55,7 @@
     };
 
     const uiDraw = () => {
+      let R = Bangle.appRect;
       g.reset().clearRect(R).setClipRect(R.x,R.y,R.x2,R.y2);
       var a = YtoIdx(R.y);
       var b = Math.min(YtoIdx(R.y2),options.c-1);
@@ -60,6 +65,7 @@
     };
 
     const draw = () => {
+      let R = Bangle.appRect;
       if (velocity > MIN_VELOCITY){
         if (!scheduledDraw)
           scheduledDraw = setTimeout(draw, 0);
@@ -70,7 +76,7 @@
           s.scroll -= velocity * direction;
         }
       }
-
+      let menuScrollMax = getMenuScrollMax();
       if (s.scroll > menuScrollMax){
         s.scroll = menuScrollMax;
         velocity = 0;
@@ -153,16 +159,17 @@
     Bangle.setUI(uiOpts);
 
     function idxToY(i) {
-      return i*options.h + R.y - rScroll;
+      return i*options.h + Bangle.appRect.y - rScroll;
     }
 
     function YtoIdx(y) {
-      return Math.floor((y + rScroll - R.y)/options.h);
+      return Math.floor((y + rScroll - Bangle.appRect.y)/options.h);
     }
 
     let s = {
-      scroll : E.clip(0|options.scroll,menuScrollMin,menuScrollMax),
+      scroll : E.clip(0|options.scroll,menuScrollMin,getMenuScrollMax()),
       draw : () => {
+        let R = Bangle.appRect;
         g.reset().clearRect(R).setClipRect(R.x,R.y,R.x2,R.y2);
         let a = YtoIdx(R.y);
         let b = Math.min(YtoIdx(R.y2),options.c-1);
@@ -171,6 +178,7 @@
         g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);
       },
       drawItem : i => {
+        let R = Bangle.appRect;
         let y = idxToY(i);
         g.reset().setClipRect(R.x,Math.max(y,R.y),R.x2,Math.min(y+options.h,R.y2));
         options.draw(i, {x:R.x,y:y,w:R.w,h:options.h});

apps/kineticscroll/boot.min.js

@@ -1,4 +1,5 @@
-(function(){E.showScroller=function(c){function k(b){return b*c.h+a.y-l}function h(b){return Math.floor((b+l-a.y)/c.h)}if(!c)return Bangle.setUI();let n,f=0,p=0,q=0,t=0,u=0,a=Bangle.appRect,m=0|c.scrollMin,r=c.h*c.c-a.h;r<m&&(r=m);const v=()=>{g.reset().clearRect(a).setClipRect(a.x,a.y,a.x2,a.y2);for(var b=h(a.y),d=Math.min(h(a.y2),c.c-1);b<=d;b++)c.draw(b,{x:a.x,y:k(b),w:a.w,h:c.h});g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1)},w=()=>{.1<f&&(n||(n=setTimeout(w,0)),f*=
+(function(){E.showScroller=function(c){function k(a){return a*c.h+Bangle.appRect.y-l}function h(a){return Math.floor((a+l-Bangle.appRect.y)/c.h)}if(!c)return Bangle.setUI();let n,f=0,p=0,q=0,r=0,t=0,m=0|c.scrollMin;const u=()=>{let a=c.h*c.c-Bangle.appRect.h;a<m&&(a=m);return a},v=()=>{let a=Bangle.appRect;g.reset().clearRect(a).setClipRect(a.x,a.y,a.x2,a.y2);for(var b=h(a.y),d=Math.min(h(a.y2),c.c-1);b<=d;b++)c.draw(b,{x:a.x,y:k(b),w:a.w,h:c.h});g.setClipRect(0,0,g.getWidth()-
-1-(Date.now()-t)/8E3,.1>=f?f=0:e.scroll-=f*q);e.scroll>r&&(e.scroll=r,f=0);e.scroll<m&&(e.scroll=m,f=0);var b=l;l=e.scroll&-2;if(b-=l){g.reset().setClipRect(a.x,a.y,a.x2,a.y2).scroll(0,b);if(0>b){b=Math.max(a.y2-(1-b),a.y);g.setClipRect(a.x,b,a.x2,a.y2);var d=h(b);for(b=k(d);b<a.y2;b+=c.h)c.draw(d,{x:a.x,y:b,w:a.w,h:c.h}),d++}else for(b=Math.min(a.y+b,a.y2),g.setClipRect(a.x,a.y,a.x2,b),d=h(b),k(d),b=k(d);b>a.y-c.h;b-=c.h)c.draw(d,{x:a.x,y:b,w:a.w,h:c.h}),d--;g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-
+1,g.getHeight()-1)},w=()=>{let a=Bangle.appRect;.1<f&&(n||(n=setTimeout(w,0)),f*=1-(Date.now()-r)/8E3,.1>=f?f=0:e.scroll-=f*q);var b=u();e.scroll>b&&(e.scroll=b,f=0);e.scroll<m&&(e.scroll=m,f=0);b=l;l=e.scroll&-2;if(b-=l){g.reset().setClipRect(a.x,a.y,a.x2,a.y2).scroll(0,b);if(0>b){b=Math.max(a.y2-(1-b),a.y);g.setClipRect(a.x,b,a.x2,a.y2);var d=h(b);for(b=k(d);b<a.y2;b+=c.h)c.draw(d,{x:a.x,y:b,w:a.w,h:c.h}),d++}else for(b=Math.min(a.y+b,a.y2),g.setClipRect(a.x,a.y,a.x2,b),d=h(b),k(d),b=k(d);b>a.y-
-1);n=void 0}};let x={mode:"custom",back:c.back,drag:b=>{let d=Date.now();q=Math.sign(b.dy);e.scroll-=b.dy;if(0<b.b){t=d;if(!u||0>p*q&&0<b.dy*q)u=t,p=f=0;p+=b.dy}else 150>d-t&&(f=q*p/(d-u)*100),u=0;w()},touch:(b,d)=>{d.y<a.y-4||(p=f=0,b=h(d.y),(0>m||0<=b)&&b<c.c&&c.select(b,{x:d.x,y:d.y+l-a.y-b*c.h}))},redraw:v};c.remove&&(x.remove=()=>{n&&clearTimeout(n);c.remove()});Bangle.setUI(x);let e={scroll:E.clip(0|c.scroll,m,r),draw:()=>{g.reset().clearRect(a).setClipRect(a.x,a.y,a.x2,a.y2);var b=h(a.y);let d=
+c.h;b-=c.h)c.draw(d,{x:a.x,y:b,w:a.w,h:c.h}),d--;g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);n=void 0}};let x={mode:"custom",back:c.back,drag:a=>{let b=Date.now();q=Math.sign(a.dy);e.scroll-=a.dy;if(0<a.b){r=b;if(!t||0>p*q&&0<a.dy*q)t=r,p=f=0;p+=a.dy}else 150>b-r&&(f=q*p/(b-t)*100),t=0;w()},touch:(a,b)=>{a=Bangle.appRect;if(!(b.y<a.y-4)){p=f=0;var d=h(b.y);(0>m||0<=d)&&d<c.c&&c.select(d,{x:b.x,y:b.y+l-a.y-d*c.h})}},redraw:v};c.remove&&(x.remove=()=>{n&&clearTimeout(n);c.remove()});Bangle.setUI(x);
-Math.min(h(a.y2),c.c-1);for(;b<=d;b++)c.draw(b,{x:a.x,y:k(b),w:a.w,h:c.h});g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1)},drawItem:b=>{let d=k(b);g.reset().setClipRect(a.x,Math.max(d,a.y),a.x2,Math.min(d+c.h,a.y2));c.draw(b,{x:a.x,y:d,w:a.w,h:c.h});g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1)},isActive:()=>Bangle.uiRedraw==v},l=e.scroll&-2;e.draw();g.flip();return e}})()
+let e={scroll:E.clip(0|c.scroll,m,u()),draw:()=>{let a=Bangle.appRect;g.reset().clearRect(a).setClipRect(a.x,a.y,a.x2,a.y2);var b=h(a.y);let d=Math.min(h(a.y2),c.c-1);for(;b<=d;b++)c.draw(b,{x:a.x,y:k(b),w:a.w,h:c.h});g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1)},drawItem:a=>{let b=Bangle.appRect,d=k(a);g.reset().setClipRect(b.x,Math.max(d,b.y),b.x2,Math.min(d+c.h,b.y2));c.draw(a,{x:b.x,y:d,w:b.w,h:c.h});g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1)},isActive:()=>Bangle.uiRedraw==v},l=e.scroll&
+-2;e.draw();g.flip();return e}})()