Minor slider-mouse position desync

[TheDiamondfinderNG]

Hey! There's a Minor bug in the code where the mouse doesn't line up with the slider https://github.com/L05/p5.touchgui/assets/69405690/e329cce0-88b7-48f8-b777-d47af8d220c3

This bug appears to happen with all sliders From observation, I think that the padding is not being accounted for when positioned

This, obviously, isn't of the highest priority, but this bug... bugs me all the same (hehe)

[TheDiamondfinderNG]

So, I found this bug while editing it so I can swap guis and found out how to do it by changing some numbers Here's what I changed to fix it:

class GuiObject {

    _setSelect(x, y) {
-         this._selU = constrain(x - this.x, 0, this.w) / this.w;
-         this._selV = constrain(y - this.y, 0, this.h) / this.h;
+         this._selU = constrain(x - this.x - 20, 0, this.w - 40) / (this.w - 40);
+         this._selV = constrain(y - this.y - 20, 0, this.h - 40) / (this.h - 40);

      }
}

class GuiSlider extends GuiObject {
    _drawState(
    fillBg,
    fillTrack,
    fillHandle,
    strokeBg,
    strokeTrack,
    strokeHandle
  ) {
-     let xpos = map(this.val, this.min, this.max, 8, this.w - 24);
+     let xpos = map(this.val, this.min, this.max, 20, this.w-20);

    if (this._style.trackWidth > 0) {
      rect(
        this.x + 10,
        this.y + 10 + h * (1 - this._style.trackWidth) * 0.5,
-         xpos,
+         xpos + 10,
        h * this._style.trackWidth,
        this._style.rounding,
        0,
        0,
        this._style.rounding
      );
    } else {
      line(
        this.x + 10,
        this.y + 10 + h * (1 - this._style.trackWidth) * 0.5,
        this.x + 10 + xpos,
        this.y + 10 + h * (1 - this._style.trackWidth) * 0.5
      );
    }
    pop();

    // Render handle
    push();
    stroke(strokeHandle);
    fill(fillHandle);
-     rect(this.x + xpos, this.y + 8, 16, this.h - 16, this._style.rounding);
+     rect(this.x + xpos + 10, this.y + 8, 16, this.h - 16, this._style.rounding);
    pop();
    pop();
  }
}

class GuiSliderV extends GuiObject {

  _drawState(
    fillBg,
    fillTrack,
    fillHandle,
    strokeBg,
    strokeTrack,
    strokeHandle
  ) {
-     let ypos = map(this.val, this.min, this.max, this.h - 24, 8);
+     let ypos = map(this.val, this.min, this.max, this.h - 20, 20);
    push();
    strokeWeight(this._style.strokeWeight);
    rectMode(CORNER);

    // Render bg
    stroke(strokeBg);
    fill(fillBg);
    rect(this.x, this.y, this.w, this.h, this._style.rounding);

    // Render track
    this._style.trackWidth = constrain(this._style.trackWidth, 0, 1);
    let w = this.w - 20;

    push();
    stroke(strokeTrack);
    fill(fillTrack);

    if (this._style.trackWidth > 0) {
      rect(
        this.x + 10 + w * (1 - this._style.trackWidth) * 0.5,
-         this.y + ypos + 10,
+         this.y + ypos,
        w * this._style.trackWidth,
-         this.h - ypos - 10,
+         this.h - ypos - 20,
        0,
        0,
        this._style.rounding,
        this._style.rounding
      );
    } else {
      line(
        this.x + 10 + w * 0.5,
        this.y + ypos + 10,
        this.x + 10 + w * 0.5,
        this.y + this.h - 10
      );
    }
    pop();

    // Render handle
    push();
    stroke(strokeHandle);
    fill(fillHandle);
-     rect(this.x + 8, this.y + ypos, this.w - 16, 16, this._style.rounding);
+     rect(this.x + 8, this.y + ypos - 10, this.w - 16, 16, this._style.rounding);
    pop();
    pop();
  }
}

Now, this is not a super good fix by any means. The values for padding are still hard-coded, and I didn't do anything with the lines, but I figured this would be a good start!