UNPKG

js-draw

Version:

Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript.

48 lines (47 loc) 2.1 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); const math_1 = require("@js-draw/math"); const constants_1 = require("../../constants"); 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(`${constants_1.toolbarCSSPrefix}thicknessSliderContainer`); // Give inputs IDs so we can label them with a <label for=...>Label text</label> thicknessInput.id = `${constants_1.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 = `${(0, math_1.toRoundedString)((sliderMax - sliderMin) / 20)}`; }; setBounds(2, 262); return { container, addTo: (parent) => { parent.appendChild(container); }, setBounds, setValue: (thickness) => { thicknessInput.value = inverseThicknessInputFn(thickness).toString(); }, }; }; exports.default = makeThicknessSlider;