E.showScroller Draws Into Widget Area.

I am using the e.showScroller function to make a scrollable menu for bangle.js 2, but I ran into an issue. When I scroll up whatever I am drawing in the menu draws into the widget area. I can redraw the widgets every time, but it makes everything really laggy and not responsive. A screen recording is attached. Here is my code:

Bangle.loadWidgets();
Bangle.drawWidgets();


function RectRnd(x1,y1,x2,y2,r) {
  pp = [];
  pp.push.apply(pp,g.quadraticBezier([x2-r­,y1, x2,y1,x2,y1+r]));
  pp.push.apply(pp,g.quadraticBezier([x2,y­2-r,x2,y2,x2-r,y2]));
  pp.push.apply(pp,g.quadraticBezier([x1+r­,y2,x1,y2,x1,y2-r]));
  pp.push.apply(pp,g.quadraticBezier([x1,y­1+r,x1,y1,x1+r,y1]));
  return pp;
}
function fillRectRnd(x1,y1,x2,y2,r,c) {
  g.setColor(c);
  g.fillPoly(RectRnd(x1,y1,x2,y2,r),1);
  g.setColor(255,255,255);
}
function drawRectRnd(x1,y1,x2,y2,r,c) {
  g.setColor(c);
  g.drawPoly(RectRnd(x1,y1,x2,y2,r),1);
  g.setColor(255,255,255);
}

E.showScroller({
  h : 40, c : 8,
  draw : (idx, r) => {
    g.reset().setFontAlign(0,-1,0).setFont('­12x20');
    fillRectRnd(r.x,r.y,r.x+173,r.y+20,7,g.t­heme.bg-20);
  },
  select : (idx) => console.log("You selected ", idx)
});

Is there any way to fix this?

1 Attachment

• screen-capture (2).webm