| 1359 | this.value === oldValue || this.onChange(); |
| 1360 | } |
| 1361 | render() |
| 1362 | { |
| 1363 | super.render(); |
| 1364 | |
| 1365 | // handle horizontal or vertical slider |
| 1366 | const isHorizontal = this.size.x > this.size.y; |
| 1367 | const barWidth = isHorizontal ? this.size.x : this.size.y; |
| 1368 | const handleWidth = isHorizontal ? this.size.y : this.size.x; |
| 1369 | if (this.fillMode) |
| 1370 | { |
| 1371 | // draw progress bar |
| 1372 | const minWidth = min(handleWidth, this.cornerRadius * 2); |
| 1373 | const progressWidth = lerp(minWidth, barWidth, this.value); |
| 1374 | const p = (progressWidth - barWidth) * (isHorizontal ? .5 : -.5); |
| 1375 | const pos = this.pos.add(isHorizontal ? vec2(p, 0) : vec2(0, p)); |
| 1376 | const color = this.disabled ? this.disabledColor : this.handleColor; |
| 1377 | const drawSize = isHorizontal ? |
| 1378 | vec2(progressWidth, this.size.y) : vec2(this.size.x, progressWidth); |
| 1379 | uiSystem.drawRect(pos, drawSize, color, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor); |
| 1380 | } |
| 1381 | else |
| 1382 | { |
| 1383 | // draw the slider handle |
| 1384 | const value = clamp(isHorizontal ? this.value : 1 - this.value); |
| 1385 | const p = (barWidth - handleWidth) * (value - .5); |
| 1386 | const pos = this.pos.add(isHorizontal ? vec2(p, 0) : vec2(0, p)); |
| 1387 | const color = this.disabled ? this.disabledColor : this.handleColor; |
| 1388 | const drawSize = vec2(handleWidth); |
| 1389 | uiSystem.drawRect(pos, drawSize, color, this.lineWidth, this.lineColor, this.cornerRadius, this.gradientColor); |
| 1390 | } |
| 1391 | |
| 1392 | // draw the text scaled to fit on the slider |
| 1393 | const textSize = this.getTextSize(); |
| 1394 | uiSystem.drawText(this.text, this.pos, textSize, |
| 1395 | this.textColor, this.textLineWidth, this.textLineColor, this.align, this.font, this.fontStyle, true, this.textShadow); |
| 1396 | } |
| 1397 | navigatePressed() |
| 1398 | { |
| 1399 | // toggle value between 0 and 1 |