PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Linearly interpolate between value intervals.

Browse source
This commit is contained in:
Jorik Schellekens 2020-04-23 10:27:41 +01:00
parent fe175bb9a8
commit 8f0d81e770
2 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/views/elements/Slider.tsx
View file

@ -35,14 +35,40 @@ type IProps = {
}
export default class Slider extends React.Component<IProps> {
// offset is a terrible inverse approximation.
// if the values represents some function f(x) = y where x is the
// index of the array and y = values[x] then offset(f, y) = x
// s.t f(x) = y.
// it assumes a monotonic function and interpolates linearly between
// y values.
// Offset is used for finding the location of a value on a
// non linear slider.
_offset(values: number[], value: number): number {
const min = values[0];
const max = values[values.length - 1];
// the index of the first number greater than value.
let closest = values.reduce((prev, curr) => {
return (value > curr ? prev + 1 : prev);
}, 0);
// Clamp value between min and max
value = Math.min(Math.max(value, min), max);
// Off the left
if (closest == 0) {
return 0;
}
// Off the right
if (closest == values.length) {
return 100;
}
// Now
const closestLessValue = values[closest - 1];
const closestGreaterValue = values[closest];
const intervalWidth = 1 / (values.length - 1);
const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue)
return 100 * (closest - 1 + linearInterpolation) * intervalWidth
return (value - min) / (max - min) * 100;
}
render(): React.ReactNode {

2
src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
View file

@ -229,7 +229,7 @@ export default class StyleUserSettingsTab extends React.Component {
<div className="mx_AppearanceUserSettingsTab_fontSlider">
<div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
<Slider
values={_range(SettingsStore.getValue("font_size_min"), SettingsStore.getValue("font_size_max"), 2)}
values={_range(SettingsStore.getValue("font_size_min"), SettingsStore.getValue("font_size_max") + 2, 2.5)}
value={this.state.fontSize}
onSelectionChange={this._onFontSizeChanged}
displayFunc={value => {}}