js-draw
Version:
Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript.
46 lines (45 loc) • 2 kB
JavaScript
import { toRoundedString } from '@js-draw/math';
import { toolbarCSSPrefix } from '../../constants.mjs';
let idCounter = 0;
const makeThicknessSlider = (context, onChange) => {
const container = document.createElement('div');
const thicknessLabel = document.createElement('label');
const thicknessInput = document.createElement('input');
container.classList.add(`${toolbarCSSPrefix}thicknessSliderContainer`);
// Give inputs IDs so we can label them with a <label for=...>Label text</label>
thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${idCounter++}`;
thicknessLabel.innerText = context.localization.thicknessLabel;
thicknessLabel.setAttribute('for', thicknessInput.id);
// Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
const inverseThicknessInputFn = (t) => Math.log10(t);
const thicknessInputFn = (t) => 10 ** t;
thicknessInput.type = 'range';
thicknessInput.oninput = () => {
onChange(thicknessInputFn(parseFloat(thicknessInput.value)));
};
container.appendChild(thicknessLabel);
container.appendChild(thicknessInput);
const setBounds = (min, max) => {
const round = (value, roundUp) => {
const roundFn = roundUp ? Math.ceil : Math.floor;
return roundFn(value * 100) / 100;
};
const sliderMin = round(inverseThicknessInputFn(min), false);
const sliderMax = round(inverseThicknessInputFn(max), true);
thicknessInput.min = `${sliderMin}`;
thicknessInput.max = `${sliderMax}`;
thicknessInput.step = `${toRoundedString((sliderMax - sliderMin) / 20)}`;
};
setBounds(2, 262);
return {
container,
addTo: (parent) => {
parent.appendChild(container);
},
setBounds,
setValue: (thickness) => {
thicknessInput.value = inverseThicknessInputFn(thickness).toString();
},
};
};
export default makeThicknessSlider;