[gbmusic] scrolling track titles cause track numbers to not clear

[thinkpoop]

Affected hardware version

Bangle 2

Your firmware version

2v25

The bug

Documenting/reporting this since I haven't been able to figure out if the cause is in gbmusic or in Layout. (I'm assuming gbmusic, but just in case.)

Issue

If a track title is long enough to scroll, the track number doesn't clear properly when going from a longer to a shorter string. (e.g. from #10/12 to #9/12, it leaves ##9/12)

This only happens if function rScroller is hit. Shorter track titles that don't scroll don't cause the issue.

To reproduce

1. Open gbmusic in the emulator: https://banglejs.com/apps/?id=gbmusic
2. Select Bangle 2
3. Run the following in the console:

info({"artist": "", "album": "", "track": "The Track Title", "c": 12, "n": 12});
info({"artist": "", "album": "", "track": "The Track Title", "c": 12, "n": 2});

This simulates changing from track #12/12 to #2/12.

If you shorten the "track" value to just "The", it won't scroll and will clear the value correctly:

info({"artist": "", "album": "", "track": "The", "c": 12, "n": 12});
info({"artist": "", "album": "", "track": "The", "c": 12, "n": 2});

Workaround

I have a rough workaround, but the actual bug is beyond me so it isn't actually a "fix".

Adding the following in function info(info) (see *** comments):

function info(info) {
  scrollStop();
  layout.title.label = info.track || "";
  layout.album.label = info.album || "";
  layout.artist.label = info.artist || "";

  // *** ADDED ***
  const newNum = formatNum(info);

  if (layout.num.label.length > newNum.length) {
    layout.clear(layout.num);
  }
  // *** /ADDED ***

  // color depends on all labels
  layout.title.col = infoColor("title");
  layout.album.col = infoColor("album");
  layout.artist.col = infoColor("artist");
  layout.num.label = newNum;                 // *** CHANGED ***

Installed apps

No response

[thinkpoop]

I poked around some more and narrowed it down to the call to setClipRect.
If I comment it out, things clear properly, and there don't seem to be any visible side effects?

But why is still beyond me.

function rScroller(l) {
  var size=l.font.split(":")[1].slice(0,-1);
  g.setFont("Vector", Math.round(g.getHeight()*size/100));
  const w = g.stringWidth(l.label)+40,
    y = l.y+l.h/2;
  l.offset = l.offset%w;
  //g.setClipRect(l.x, l.y, l.x+l.w-1, l.y+l.h-1) // *** COMMENTED OUT ***
  g.setColor(l.col).setBgColor(l.bgCol) // need to set colors: iScroll calls this function outside Layout
    .setFontAlign(-1, 0) // left center
    .clearRect(l.x, l.y, l.x+l.w-1, l.y+l.h-1)
    .drawString(l.label, l.x-l.offset+40, y)
    .drawString(l.label, l.x-l.offset+40+w, y);
}

[thinkpoop]

Here's a small example of the issue.

This is all just for the sake of documenting; my solution is "just don't do that".

I did stumble into some more details: Having another txt item after the custom item, causes the 1st txt item to clear properly.

If both txt items are before the custom item, neither will clear properly.

const BREAK_BY_CLIP = true; // set to true to break; false to not break
const FIX_WITH_THIRD_ITEM = false; // set to true to fix via 3rd item

g.clear();

function rCustom(l) {
  if(BREAK_BY_CLIP) {
    // Doing this step breaks things
    g.setClipRect(l.x, l.y, l.x+l.w-1, l.y+l.h-1);
  }
  g.drawString(l.label, l.x, l.y);
}

const Layout = require("Layout");
const layout = new Layout(
  {
    type: "v", c: [
      {id: "A", type: "txt", label: "", font: "6x8"},
      {id: "B", type: "custom", label: "", font: "6x8", render: rCustom, fillx:1, filly:1},
      {id: "C", type: "txt", label: "test", font: "6x8"}
    ],
  }, {lazy: true}
);
layout.render();

function info(info) {
  layout.A.label = info.A;
  layout.B.label = info.B;
  if(FIX_WITH_THIRD_ITEM) {
    // Having this item change, causes item A to fix itself
    // Even if the setClipRect happened
    layout.C.label = info.C;
  }
  layout.update();
  layout.render();
}

info({A: "ABCDEFGHIJKLMNOP", B: "the", C: "ABC"});
info({A: "123", B:"the", C: "1234"});