@tremolo-ui/react 0.0.1 → 0.0.3

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 import { css, Global } from '@emotion/react';
-import { useRef, useInsertionEffect, useCallback, useEffect, useMemo, Children, isValidElement } from 'react';
+import React, { useRef, useEffect, useInsertionEffect, useCallback, useMemo, useState } from 'react';
 
 function clamp(value, min, max) {
     return Math.max(min, Math.min(value, max));
@@ -40,6 +40,164 @@ function toFixed(x, fractionDigits) {
 function decimalPart(x) {
     return String(x).split('.')[1];
 }
+function radian(degree) {
+    return (Math.PI * degree) / 180;
+}
+function degree(radian) {
+    return (180 * radian) / Math.PI;
+}
+function dbToGain(db) {
+    return Math.pow(10, db / 20);
+}
+function gainToDb(gain) {
+    return 20 * (Math.log(gain) / Math.LN10);
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
+const drawingState = [
+    'strokeStyle',
+    'fillStyle',
+    'globalAlpha',
+    'lineWidth',
+    'lineCap',
+    'lineJoin',
+    'miterLimit',
+    'lineDashOffset',
+    'shadowOffsetX',
+    'shadowOffsetY',
+    'shadowBlur',
+    'shadowColor',
+    'globalCompositeOperation',
+    'font',
+    'textAlign',
+    'textBaseline',
+    'direction',
+    'imageSmoothingEnabled',
+];
+
+function setDprConfig(canvas, context, width, height, dpr) {
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    context.scale(dpr, dpr);
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+}
+/**
+ * A simple animatable canvas with requestAnimationFrame()
+ */
+function AnimationCanvas(_a) {
+    var { width = 100, height = 100, style, relativeSize = false, reduceFlickering = true, options, init, draw } = _a, props = __rest(_a, ["width", "height", "style", "relativeSize", "reduceFlickering", "options", "init", "draw"]);
+    const canvasRef = useRef(null);
+    const memoCanvasRef = useRef(null);
+    const reqIdRef = useRef();
+    const widthRef = useRef(0);
+    const heightRef = useRef(0);
+    const loop = (context, width, height, count) => {
+        reqIdRef.current = requestAnimationFrame(() => loop(context, width, height, count + 1));
+        draw(context, width, height, count + 1);
+    };
+    useEffect(() => {
+        if (!canvasRef.current)
+            return;
+        const canvas = canvasRef.current;
+        const context = canvas.getContext('2d', options);
+        if (!context)
+            throw new Error('Cannot get canvas context.');
+        const dpr = window.devicePixelRatio;
+        if (relativeSize) {
+            const parent = canvas.parentElement;
+            if (!parent)
+                throw new Error("Canvas doesn't have a parent element.");
+            const memoCanvas = memoCanvasRef.current;
+            const memoContext = memoCanvas === null || memoCanvas === void 0 ? void 0 : memoCanvas.getContext('2d', options);
+            const resizeObserver = new ResizeObserver(() => {
+                console.log('resize');
+                // Prevents loss of some context when the canvas is resized
+                const contextMemo = {};
+                for (const prop of drawingState) {
+                    contextMemo[prop] = context[prop];
+                }
+                const w = Math.floor(parent.clientWidth);
+                const h = Math.floor(parent.clientHeight);
+                if (reduceFlickering && memoCanvas && memoContext) {
+                    memoCanvas.width = w * dpr;
+                    memoCanvas.height = h * dpr;
+                    memoContext.scale(1 / dpr, 1 / dpr);
+                    memoContext.drawImage(context.canvas, 0, 0);
+                }
+                setDprConfig(canvas, context, w, h, dpr);
+                widthRef.current = w;
+                heightRef.current = h;
+                for (const prop of drawingState) {
+                    context[prop] = contextMemo[prop];
+                }
+                if (reduceFlickering && memoContext) {
+                    context.drawImage(memoContext.canvas, 0, 0);
+                }
+            });
+            resizeObserver.observe(parent);
+            const w = Math.floor(parent.clientWidth);
+            const h = Math.floor(parent.clientHeight);
+            setDprConfig(canvas, context, w, h, dpr);
+            if (init)
+                init(context, widthRef, heightRef, 0);
+            loop(context, widthRef, heightRef, 0);
+            return () => {
+                if (reqIdRef.current)
+                    cancelAnimationFrame(reqIdRef.current);
+                resizeObserver.unobserve(parent);
+            };
+        }
+        else {
+            const rect = canvas.getBoundingClientRect();
+            setDprConfig(canvas, context, rect.width, rect.height, dpr);
+            widthRef.current = rect.width;
+            heightRef.current = rect.height;
+            if (init)
+                init(context, widthRef, heightRef, 0);
+            loop(context, widthRef, heightRef, 0);
+            return () => {
+                if (reqIdRef.current)
+                    cancelAnimationFrame(reqIdRef.current);
+            };
+        }
+    }, [loop]);
+    return (jsxs(Fragment, { children: [jsx("canvas", Object.assign({ width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, css: css(style), ref: canvasRef }, props)), relativeSize && reduceFlickering && (jsx("canvas", { style: { display: 'none' }, width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, ref: memoCanvasRef }))] }));
+}
 
 /**
  * This hook is user-land implementation of the experimental `useEffectEvent` hook.
@@ -72,27 +230,62 @@ function useEventListener(target, event, handler, options) {
     };
 }
 
-function styleHelper(property) {
-    if (typeof property == 'number') {
-        return `${property}px`;
-    }
-    else {
-        return property;
-    }
+function useRefCallbackEvent(event, handler, options, deps = []) {
+    return useMemo(() => {
+        let cleanup;
+        return (node) => {
+            if (!node) {
+                cleanup === null || cleanup === void 0 ? void 0 : cleanup();
+                return;
+            }
+            node.addEventListener(event, handler, options);
+            cleanup = () => {
+                node.removeEventListener(event, handler, options);
+            };
+        };
+    }, deps);
 }
 
-function Knob({ value, min, max, step = 1, skew = 1, size = 50, active = '#7998ec', inactive = '#eee', bg = '#ccc', thumb = '#4e76e6', lineWeight = 12, thumbWeight = 4, cursor = 'pointer', style, bodyNoSelect = true, enableWheel, onChange, }) {
+const defaultOptions = {
+    active: '#7998ec',
+    inactive: '#eee',
+    bg: '#ccc',
+    thumb: '#4e76e6',
+    lineWeight: 6,
+    thumbWeight: 4,
+};
+/**
+ * simple rotary Knob.
+ */
+function Knob(_a) {
+    var { value, min, max, defaultValue = min, startValue = min, step = 1, skew = 1, size, width = 50, height = 50, options = defaultOptions, 
+    // draw,
+    cursor = 'pointer', style, bodyNoSelect = true, enableWheel, enableDoubleClickDefault = true, onChange, _active, _focus, _hover } = _a, props = __rest(_a, ["value", "min", "max", "defaultValue", "startValue", "step", "skew", "size", "width", "height", "options", "cursor", "style", "bodyNoSelect", "enableWheel", "enableDoubleClickDefault", "onChange", "_active", "_focus", "_hover"]);
     // -- state and ref ---
     // const [privateValue, setPrivateValue] = useState(value);
     const dragOffsetY = useRef(undefined);
     // --- interpret props ---
-    const percent = normalizeValue(value, min, max, skew);
-    const handleValue = (event) => {
+    const opts = Object.assign(Object.assign({}, defaultOptions), options);
+    // const percent = normalizeValue(value, min, max, skew)
+    const isRelativeSize = typeof (size !== null && size !== void 0 ? size : width) == 'string';
+    const adaptSize = (size) => {
+        if (typeof size == 'string') {
+            return Number(size.slice(0, -1));
+        }
+        else {
+            return size;
+        }
+    };
+    const handleEvent = (event) => {
+        const isTouch = event instanceof TouchEvent;
+        if (isTouch && event.cancelable)
+            event.preventDefault();
         if (dragOffsetY.current) {
             if (bodyNoSelect)
                 document.body.classList.add('no-select');
-            const delta = dragOffsetY.current - event.screenY;
-            dragOffsetY.current = event.screenY;
+            const screenY = isTouch ? event.touches[0].screenY : event.screenY;
+            const delta = dragOffsetY.current - screenY;
+            dragOffsetY.current = screenY;
             const n = normalizeValue(value, min, max, skew);
             const v = rawValue(n + delta / 100, min, max, skew);
             const v2 = clamp(stepValue(v, step), min, max);
@@ -101,93 +294,182 @@ function Knob({ value, min, max, step = 1, skew = 1, size = 50, active = '#7998e
         }
     };
     // --- hooks ---
-    const wrapperRef = useMemo(() => {
-        let cleanup;
-        return (div) => {
-            if (!div) {
-                cleanup === null || cleanup === void 0 ? void 0 : cleanup();
-                return;
-            }
-            const controller = new AbortController();
-            div.addEventListener('wheel', (event) => {
-                if (!enableWheel)
-                    return;
-                event.preventDefault();
-                const x = event.deltaY > 0 ? -enableWheel[1] : enableWheel[1];
-                let v;
-                if (enableWheel[0] == 'normalized') {
-                    const n = normalizeValue(value, min, max, skew);
-                    v = rawValue(n + x, min, max, skew);
-                }
-                else {
-                    v = value + x;
-                }
-                if (onChange)
-                    onChange(clamp(stepValue(v, step), min, max));
-            }, {
-                signal: controller.signal,
-                passive: false,
-            });
-            cleanup = () => {
-                // console.log("cleanup")
-                controller.abort();
-            };
-        };
-    }, [value]);
-    useEventListener(window, 'mousemove', (event) => {
-        handleValue(event);
-    });
-    useEventListener(window, 'mouseup', () => {
+    const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
+        if (!enableWheel)
+            return;
+        event.preventDefault();
+        const x = event.deltaY > 0 ? -enableWheel[1] : enableWheel[1];
+        let v;
+        if (enableWheel[0] == 'normalized') {
+            const n = normalizeValue(value, min, max, skew);
+            v = rawValue(n + x, min, max, skew);
+        }
+        else {
+            v = value + x;
+        }
+        if (onChange)
+            onChange(clamp(stepValue(v, step), min, max));
+    }, { passive: false }, [enableWheel, value, min, max, skew, step, onChange]);
+    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleEvent, { passive: false }, [value, min, max, skew, step, onChange, bodyNoSelect]);
+    useEventListener(window, 'mousemove', handleEvent);
+    useEventListener(window, 'pointerup', () => {
         dragOffsetY.current = undefined;
         if (bodyNoSelect)
             document.body.classList.remove('no-select');
     });
-    return (jsx("div", { className: "tremolo-knob", ref: wrapperRef, onMouseDown: (event) => {
+    return (jsxs("div", Object.assign({ className: "tremolo-knob", ref: (div) => {
+            wheelRefCallback(div);
+            touchMoveRefCallback(div);
+        }, role: "slider", tabIndex: 0, "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": min, css: css(Object.assign(Object.assign({ display: 'inline-block', width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height, cursor: cursor }, style), { ':active': Object.assign({}, _active), ':focus': Object.assign({}, _focus), ':hover': Object.assign({}, _hover) })), onPointerDown: (event) => {
             dragOffsetY.current = event.screenY;
-            handleValue(event);
-        }, style: Object.assign({ display: 'inline-block', width: size, height: size }, style), children: jsx("div", { css: css({
-                display: 'inline-block',
-                width: size,
-                height: size,
-                background: `conic-gradient(${active} ${percent * 270}deg, ${inactive} ${percent * 270}deg, ${inactive} ${270}deg, ${bg} 90deg)`,
-                borderRadius: '50%',
-                position: 'relative',
-                cursor: cursor,
-                rotate: '-135deg',
-                '&::before': {
-                    display: 'block',
-                    position: 'absolute',
-                    right: 0,
-                    left: 0,
-                    top: 0,
-                    bottom: 0,
-                    margin: 'auto',
-                    content: '""',
-                    width: `calc(${styleHelper(size)} - ${styleHelper(lineWeight)})`,
-                    height: `calc(${styleHelper(size)} - ${styleHelper(lineWeight)})`,
-                    backgroundColor: bg,
-                    borderRadius: '50%',
-                },
-                '&::after': {
-                    display: 'block',
-                    position: 'absolute',
-                    top: 0,
-                    bottom: 0,
-                    // left: lineWeight,
-                    margin: 'auto 0',
-                    content: '""',
-                    width: `calc(0.5 * ${styleHelper(size)})`,
-                    height: thumbWeight,
-                    borderRadius: thumbWeight,
-                    backgroundColor: thumb,
-                    rotate: `${90 + percent * 270}deg`,
-                    transformOrigin: '100% 50%',
-                },
-            }), children: jsx(Global, { styles: {
+            handleEvent(event);
+        }, onDoubleClick: () => {
+            if (enableDoubleClickDefault && onChange) {
+                onChange(defaultValue);
+            }
+        } }, props, { children: [jsx(Global, { styles: {
                     '.no-select': {
                         userSelect: 'none',
                     },
-                } }) }) }));
+                } }), jsx(AnimationCanvas, { width: adaptSize(size !== null && size !== void 0 ? size : width), height: adaptSize(size !== null && size !== void 0 ? size : height), relativeSize: isRelativeSize, 
+                // TODO
+                // reduceFlickering={false}
+                draw: (ctx, _w, _h) => {
+                    const p = normalizeValue(value, min, max, skew);
+                    const startP = normalizeValue(startValue, min, max, skew);
+                    const w = _w.current, cx = w / 2;
+                    const h = _h.current, cy = h / 2;
+                    const r = Math.min(cx, cy);
+                    if (r <= 0)
+                        return;
+                    // reset
+                    ctx.clearRect(0, 0, w, h);
+                    ctx.lineCap = 'butt';
+                    // bg
+                    ctx.beginPath();
+                    ctx.fillStyle = opts.bg;
+                    ctx.arc(cx, cy, r - 0.5, 0, 2 * Math.PI);
+                    ctx.fill();
+                    ctx.lineCap = 'round';
+                    ctx.lineWidth = opts.lineWeight;
+                    // inactive rotary
+                    ctx.beginPath();
+                    ctx.strokeStyle = opts.inactive;
+                    ctx.arc(cx, cy, r - 0.5 - opts.lineWeight / 2, radian(135), radian(45));
+                    ctx.stroke();
+                    // active rotary
+                    ctx.beginPath();
+                    ctx.strokeStyle = opts.active;
+                    ctx.arc(cx, cy, r - 0.5 - opts.lineWeight / 2, radian(135 + 270 * startP), radian(135 + 270 * p), p < startP);
+                    ctx.stroke();
+                    // thumb
+                    ctx.beginPath();
+                    ctx.moveTo(cx, cy);
+                    ctx.lineTo(cx +
+                        Math.cos(radian(135 + 270 * p)) *
+                            (r - 0.5 - opts.thumbWeight / 2), cy +
+                        Math.sin(radian(135 + 270 * p)) *
+                            (r - 0.5 - opts.thumbWeight / 2));
+                    ctx.strokeStyle = opts.thumb;
+                    ctx.lineWidth = opts.thumbWeight;
+                    ctx.stroke();
+                } })] })));
+}
+
+function selectUnit(units, value) {
+    if (typeof units == 'string')
+        return [units, 1];
+    let i = 0;
+    for (; i < units.length; i++) {
+        if (Math.abs(units[i][1]) > Math.abs(value))
+            break;
+    }
+    return units[Math.max(0, i - 1)];
+}
+function parseValue(inputString, units, digit) {
+    if (!units) {
+        return {
+            rawValue: Number(inputString.trim()) || 0,
+            formatValue: inputString.trim(),
+            unit: '',
+        };
+    }
+    else if (typeof units == 'string') {
+        return {
+            rawValue: Number(inputString.trim()) || 0,
+            formatValue: `${inputString.trim()}${units}`,
+            unit: units,
+        };
+    }
+    const unitList = units.map(([u, _s]) => u);
+    const scaleList = units.map(([_u, s]) => s);
+    let rawValue = 0;
+    let formatValue = `${scaleList[0]}`;
+    let unit = unitList[0];
+    const m = inputString.trim().match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
+    if (m) {
+        rawValue = Number(m[1]) || 0;
+        const inputUnit = m[3];
+        if (inputUnit != '' && unitList.indexOf(inputUnit) != -1) {
+            rawValue *= scaleList[unitList.indexOf(inputUnit)];
+            const s = selectUnit(units, rawValue);
+            const v = rawValue / s[1];
+            formatValue = `${digit != undefined ? toFixed(v, digit) : v}${s[0]}`;
+            unit = s[0];
+        }
+        else {
+            const [u, scale] = selectUnit(units, rawValue);
+            const v = rawValue / scale;
+            formatValue = `${digit != undefined ? toFixed(v, digit) : v}${u}`;
+            unit = u;
+        }
+    }
+    return {
+        rawValue: rawValue,
+        formatValue: formatValue,
+        unit: unit,
+    };
+}
+
+/**
+ * Input with some useful functions for entering numerical values.
+ */
+function NumberInput(_a) {
+    var { value, min, // TODO
+    max, // TODO
+    step, // TODO
+    units, disabled = false, placeholder, readOnly, tabIndex, strict = false, digit, selectWithFocus = 'none', blurWithEnter = true, className, style, onChange, onFocus, onBlur } = _a, pseudo = __rest(_a, ["value", "min", "max", "step", "units", "disabled", "placeholder", "readOnly", "tabIndex", "strict", "digit", "selectWithFocus", "blurWithEnter", "className", "style", "onChange", "onFocus", "onBlur"]);
+    const [showValue, setShowValue] = useState(parseValue(String(value), units, digit).formatValue);
+    const calculatedStrict = units ? false : strict;
+    const { _active, _focus, _hover } = pseudo;
+    return (jsx("input", { className: 'tremolo-slider' + (className ? ` ${className}` : ''), value: showValue, type: calculatedStrict ? 'number' : 'text', spellCheck: 'false', disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, css: css(Object.assign(Object.assign({ display: 'inline-block', height: '2rem', font: 'inherit', margin: 0, paddingLeft: 10, paddingRight: 10, outlineColor: 'transparent', outlineStyle: 'solid', outlineWidth: 1, background: 'inherit', appearance: 'none', borderStyle: 'solid', borderWidth: 1, borderColor: '#bbb', borderRadius: 4, '&:hover': Object.assign({ outlineColor: '#bbb' }, _hover), '&:focus': Object.assign({ outlineColor: '#4e76e6', outlineWidth: 2 }, _focus) }, (_active && { '&:active': Object.assign({}, _active) })), style)), onChange: (event) => {
+            const v = event.currentTarget.value;
+            setShowValue(v);
+            if (onChange)
+                onChange(parseValue(v, units, digit).rawValue, event);
+        }, onFocus: (event) => {
+            const v = event.currentTarget.value;
+            const parsed = parseValue(v, units, digit);
+            if (selectWithFocus == 'all') {
+                event.currentTarget.setSelectionRange(0, v.length);
+            }
+            else if (selectWithFocus == 'number') {
+                event.currentTarget.setSelectionRange(0, parsed.formatValue.length - parsed.unit.length);
+            }
+            if (onFocus)
+                onFocus(parsed.rawValue, event);
+        }, onBlur: (event) => {
+            // update value
+            const v = event.currentTarget.value;
+            const parsed = parseValue(v, units, digit);
+            setShowValue(parsed.formatValue);
+            if (onBlur)
+                onBlur(parsed.rawValue, event);
+        }, onKeyDown: (event) => {
+            if (blurWithEnter && event.key == 'Enter') {
+                event.currentTarget.blur();
+            }
+        } }));
 }
 
 function isHorizontal(d) {
@@ -225,85 +507,121 @@ function parseScaleOrderList(scale, min, max, step) {
     return scalesList;
 }
 
-// interface SliderThumbProps {}
-function SliderThumb( /* {}: SliderThumbProps */) {
-    return jsx("div", {});
+function styleHelper(value, op, influencer) {
+    if (op && influencer) {
+        if (typeof value == 'number') {
+            if (op == '+')
+                return `${value + influencer}px`;
+            if (op == '-')
+                return `${value - influencer}px`;
+            if (op == '*')
+                return `${value * influencer}px`;
+            if (op == '/')
+                return `${value / influencer}px`;
+        }
+        else {
+            return `calc(${value}px ${op} ${influencer})`;
+        }
+    }
+    else {
+        if (typeof value == 'number') {
+            return `${value}px`;
+        }
+        else {
+            return value;
+        }
+    }
 }
-function Slider({ value, min, max, step = 1, length = 140, thickness = 10, direction = 'right', skew = 1, scale, scaleOption, color = '#4e76e6', bg = '#eee', cursor = 'pointer', style, bodyNoSelect = true, enableWheel, onChange, children, }) {
-    var _a, _b;
+
+function SliderThumb({ color, children, style, __css, }) {
+    return (jsx("div", { className: "tremolo-slider-thumb-wrapper", css: css(Object.assign({ width: 'fit-content', height: 'fit-content', position: 'absolute', translate: '-50% -50%', zIndex: 100 }, __css)), children: children ? (children) : (
+        // default slider thumb
+        jsx("div", { className: "tremolo-slider-thumb", 
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex: 0, css: css(Object.assign({ background: color, width: '1.4rem', height: '1.4rem', borderRadius: '50%' }, style)) })) }));
+}
+
+function SliderTrack({ children, style, __css, }) {
+    return (jsx("div", { className: "tremolo-slider-track", css: css(Object.assign(Object.assign({}, __css), style)), children: children }));
+}
+
+/**
+ * Customizable slider
+ */
+function Slider(_a) {
+    var _b, _c;
+    var { value, min, max, step = 1, skew = 1, length = 140, thickness = 10, direction = 'right', scale, scaleOption, color = '#4e76e6', bg = '#eee', className, style, bodyNoSelect = true, enableWheel, onChange, children } = _a; __rest(_a, ["value", "min", "max", "step", "skew", "length", "thickness", "direction", "scale", "scaleOption", "color", "bg", "className", "style", "bodyNoSelect", "enableWheel", "onChange", "children"]);
     // -- state and ref ---
-    const baseWrapperElement = useRef(null);
-    // --- interpret props ---
+    const trackElementRef = useRef(null);
     const percent = normalizeValue(value, min, max, skew) * 100;
     const percentRev = isReversed(direction) ? 100 - percent : percent;
     const scalesList = parseScaleOrderList(scale, min, max, step);
     if (isReversed(direction))
         scalesList.reverse();
-    // let defaultThumb = true
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let trackProps;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let thumbProps;
     if (children != undefined) {
-        const childElements = Children.toArray(children);
-        const lastElement = childElements[childElements.length - 1];
-        if (isValidElement(lastElement)) {
-            // defaultThumb = false
-            if (lastElement.type == SliderThumb) ;
-        }
-        else {
-            throw new Error('children is an invalid element.');
-        }
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                if (child.type == SliderThumb) {
+                    thumbProps = child.props;
+                }
+                else if (child.type == SliderTrack) {
+                    trackProps = child.props;
+                }
+                else {
+                    throw new Error('only <SliderThumb> or <SliderTrack>');
+                }
+            }
+            else {
+                throw new Error('children is an invalid element.');
+            }
+        });
     }
     const thumbDragged = useRef(false);
     const handleValue = (event) => {
-        if (baseWrapperElement.current && thumbDragged.current) {
-            if (bodyNoSelect)
-                document.body.classList.add('no-select');
-            const { left: x1, top: y1, right: x2, bottom: y2, } = baseWrapperElement.current.getBoundingClientRect();
-            const mouseX = event.clientX;
-            const mouseY = event.clientY;
-            const n = isHorizontal(direction)
-                ? normalizeValue(mouseX, x1, x2)
-                : normalizeValue(mouseY, y1, y2);
-            const v = rawValue(isReversed(direction) ? 1 - n : n, min, max, skew);
-            const v2 = clamp(stepValue(v, step), min, max);
-            if (onChange)
-                onChange(v2);
-        }
+        if (!trackElementRef.current || !thumbDragged.current)
+            return;
+        const isTouch = event instanceof TouchEvent;
+        if (isTouch && event.cancelable)
+            event.preventDefault();
+        if (bodyNoSelect)
+            document.body.classList.add('no-select');
+        const { left: x1, top: y1, right: x2, bottom: y2, } = trackElementRef.current.getBoundingClientRect();
+        const mouseX = isTouch ? event.touches[0].clientX : event.clientX;
+        const mouseY = isTouch ? event.touches[0].clientY : event.clientY;
+        const n = isHorizontal(direction)
+            ? normalizeValue(mouseX, x1, x2)
+            : normalizeValue(mouseY, y1, y2);
+        const v = rawValue(isReversed(direction) ? 1 - n : n, min, max, skew);
+        const v2 = clamp(stepValue(v, step), min, max);
+        if (onChange)
+            onChange(v2);
     };
     // --- hooks ---
-    const wrapperRef = useMemo(() => {
-        let cleanup;
-        return (div) => {
-            if (!div) {
-                cleanup === null || cleanup === void 0 ? void 0 : cleanup();
-                return;
-            }
-            const controller = new AbortController();
-            div.addEventListener('wheel', (event) => {
-                if (!enableWheel)
-                    return;
-                event.preventDefault();
-                let x = event.deltaY > 0 ? enableWheel[1] : -enableWheel[1];
-                if (isReversed(direction))
-                    x *= -1;
-                let v;
-                if (enableWheel[0] == 'normalized') {
-                    const n = normalizeValue(value, min, max, skew);
-                    v = rawValue(n + x, min, max, skew);
-                }
-                else {
-                    v = value + x;
-                }
-                if (onChange)
-                    onChange(clamp(stepValue(v, step), min, max));
-            }, {
-                signal: controller.signal,
-                passive: false,
-            });
-            cleanup = () => {
-                // console.log("cleanup")
-                controller.abort();
-            };
-        };
-    }, [value]);
+    const touchMoveRefCallback = useRefCallbackEvent('touchmove', handleValue, { passive: false }, [min, max, skew, step, direction, onChange]);
+    const wheelRefCallback = useRefCallbackEvent('wheel', (event) => {
+        if (!enableWheel)
+            return;
+        event.preventDefault();
+        let x = event.deltaY > 0 ? enableWheel[1] : -enableWheel[1];
+        if (isReversed(direction) || isHorizontal(direction))
+            x *= -1;
+        let v;
+        if (enableWheel[0] == 'normalized') {
+            const n = normalizeValue(value, min, max, skew);
+            v = rawValue(n + x, min, max, skew);
+        }
+        else {
+            v = value + x;
+        }
+        if (onChange)
+            onChange(clamp(stepValue(v, step), min, max));
+    }, {
+        passive: false,
+    }, [enableWheel, value, min, max, skew, step]);
     useEventListener(window, 'mousemove', (event) => {
         handleValue(event);
     });
@@ -312,44 +630,38 @@ function Slider({ value, min, max, step = 1, length = 140, thickness = 10, direc
         if (bodyNoSelect)
             document.body.classList.remove('no-select');
     });
-    return (jsxs("div", { ref: wrapperRef, className: "tremolo-slider", style: {
-            display: 'inline-block',
-            boxSizing: 'border-box',
-            margin: '0.7rem',
-            padding: 0,
-            cursor: cursor,
-        }, onMouseDown: (event) => {
+    return (jsxs("div", { className: 'tremolo-slider' + (className ? ` ${className}` : ''), ref: (div) => {
+            wheelRefCallback(div);
+            touchMoveRefCallback(div);
+        }, tabIndex: -1, role: "slider", "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": min, "aria-orientation": isHorizontal(direction) ? 'horizontal' : 'vertical', css: css(Object.assign({ display: 'inline-block', boxSizing: 'border-box', margin: '0.7rem', padding: 0, cursor: 'pointer' }, style)), onPointerDown: (event) => {
             thumbDragged.current = true;
             handleValue(event);
         }, children: [jsx(Global, { styles: {
                     '.no-select': {
                         userSelect: 'none',
                     },
-                } }), jsxs("div", { style: {
+                } }), jsxs("div", { css: css({
                     display: 'flex',
                     flexDirection: isHorizontal(direction) ? 'column' : 'row',
-                }, children: [jsx("div", { ref: baseWrapperElement, css: css(Object.assign({ background: `linear-gradient(to ${gradientDirection(direction)}, ${color} ${percent}%, ${bg} ${percent}%)`, borderRadius: typeof thickness == 'number'
-                                ? thickness / 2
-                                : `calc(${thickness} / 2)`, borderStyle: 'solid', borderColor: '#ccc', borderWidth: 2, width: isHorizontal(direction) ? length : thickness, height: isHorizontal(direction) ? thickness : length, position: 'relative', zIndex: 1 }, style)), children: jsx("div", { className: "tremolo-slider-thumb-wrapper", style: {
-                                width: 'fix-content',
-                                height: 'fix-content',
-                                position: 'absolute',
-                                top: isHorizontal(direction) ? '50%' : `${percentRev}%`,
-                                left: isHorizontal(direction) ? `${percentRev}%` : '50%',
-                                translate: '-50% -50%',
-                                zIndex: 100,
-                            }, children: children ? (children) : (jsx("div", { className: "tremolo-slider-thumb", style: {
-                                    background: color,
-                                    width: '1.4rem',
-                                    height: '1.4rem',
-                                    borderRadius: '50%',
-                                } })) }) }), scale && (jsx("div", { className: "tremolo-slider-scale-wrapper", style: Object.assign({ position: 'relative', width: isHorizontal(direction) ? length : undefined, height: isVertical(direction) ? length : undefined, marginLeft: isHorizontal(direction)
+                }), children: [jsxs("div", { className: "tremolo-slider-track-wrapper", ref: trackElementRef, css: css({ position: 'relative' }), children: [jsx(SliderTrack, Object.assign({ __css: {
+                                    background: `linear-gradient(to ${gradientDirection(direction)}, ${color} ${percent}%, ${bg} ${percent}%)`,
+                                    borderRadius: styleHelper(thickness, '/', 2),
+                                    borderStyle: 'solid',
+                                    borderColor: '#ccc',
+                                    borderWidth: 2,
+                                    width: isHorizontal(direction) ? length : thickness,
+                                    height: isHorizontal(direction) ? thickness : length,
+                                    zIndex: 1,
+                                } }, trackProps)), jsx(SliderThumb, Object.assign({ color: color, __css: {
+                                    top: isHorizontal(direction) ? '50%' : `${percentRev}%`,
+                                    left: isHorizontal(direction) ? `${percentRev}%` : '50%',
+                                } }, thumbProps))] }), scale && (jsx("div", { className: "tremolo-slider-scale-wrapper", css: css(Object.assign({ position: 'relative', width: isHorizontal(direction) ? length : undefined, height: isVertical(direction) ? length : undefined, marginLeft: isHorizontal(direction)
                                 ? 2
-                                : ((_a = scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.gap) !== null && _a !== void 0 ? _a : `calc((1.4rem - ${styleHelper(thickness)}) / 2)`), marginTop: isVertical(direction)
+                                : ((_b = scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.gap) !== null && _b !== void 0 ? _b : `calc((1.4rem - ${styleHelper(thickness)}) / 2)`), marginTop: isVertical(direction)
                                 ? 2
-                                : ((_b = scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.gap) !== null && _b !== void 0 ? _b : `calc((1.4rem - ${styleHelper(thickness)}) / 2)`) }, scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.style), children: scalesList.map((item, index) => {
-                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-                            return (jsxs("div", { style: {
+                                : ((_c = scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.gap) !== null && _c !== void 0 ? _c : `calc((1.4rem - ${styleHelper(thickness)}) / 2)`) }, scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.style)), children: scalesList.map((item, index) => {
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+                            return (jsxs("div", { css: css({
                                     display: 'flex',
                                     flexDirection: isHorizontal(direction) ? 'column' : 'row',
                                     justifyContent: 'center',
@@ -367,21 +679,25 @@ function Slider({ value, min, max, step = 1, length = 140, thickness = 10, direc
                                         : undefined,
                                     translate: isHorizontal(direction) ? '-50% 0' : '0 -50%',
                                     zIndex: 10,
-                                }, children: [item.type != 'number' && (jsx("div", { className: "tremolo-slider-scale-mark", style: {
+                                }), children: [((_b = (_a = item.type) !== null && _a !== void 0 ? _a : scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.defaultType) !== null && _b !== void 0 ? _b : 'mark-number') !=
+                                        'number' && (jsx("div", { className: "tremolo-slider-scale-mark", css: css({
                                             width: isHorizontal(direction)
-                                                ? ((_b = (_a = item.style) === null || _a === void 0 ? void 0 : _a.thickness) !== null && _b !== void 0 ? _b : 1)
-                                                : ((_d = (_c = item.style) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : '0.5rem'),
+                                                ? ((_d = (_c = item.style) === null || _c === void 0 ? void 0 : _c.thickness) !== null && _d !== void 0 ? _d : 1)
+                                                : ((_f = (_e = item.style) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : '0.5rem'),
                                             height: isVertical(direction)
-                                                ? ((_f = (_e = item.style) === null || _e === void 0 ? void 0 : _e.thickness) !== null && _f !== void 0 ? _f : 1)
-                                                : ((_h = (_g = item.style) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : '0.5rem'),
-                                            backgroundColor: (_l = (_k = (_j = item.style) === null || _j === void 0 ? void 0 : _j.markColor) !== null && _k !== void 0 ? _k : scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.markColor) !== null && _l !== void 0 ? _l : '#222',
+                                                ? ((_h = (_g = item.style) === null || _g === void 0 ? void 0 : _g.thickness) !== null && _h !== void 0 ? _h : 1)
+                                                : ((_k = (_j = item.style) === null || _j === void 0 ? void 0 : _j.length) !== null && _k !== void 0 ? _k : '0.5rem'),
+                                            backgroundColor: (_o = (_m = (_l = item.style) === null || _l === void 0 ? void 0 : _l.markColor) !== null && _m !== void 0 ? _m : scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.markColor) !== null && _o !== void 0 ? _o : '#222',
                                             marginBottom: isHorizontal(direction) ? 2 : undefined,
                                             marginRight: isVertical(direction) ? 2 : undefined,
-                                        } })), item.type != 'mark' && (jsx("div", { className: "tremolo-slider-scale-number", style: {
-                                            color: (_o = (_m = item.style) === null || _m === void 0 ? void 0 : _m.labelColor) !== null && _o !== void 0 ? _o : scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.labelColor,
-                                        }, children: item.at }))] }, index));
+                                        }) })), ((_q = (_p = item.type) !== null && _p !== void 0 ? _p : scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.defaultType) !== null && _q !== void 0 ? _q : 'mark-number') !=
+                                        'mark' && (jsx("div", { className: "tremolo-slider-scale-number", css: css({
+                                            color: (_s = (_r = item.style) === null || _r === void 0 ? void 0 : _r.labelColor) !== null && _s !== void 0 ? _s : scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.labelColor,
+                                            width: scaleOption === null || scaleOption === void 0 ? void 0 : scaleOption.labelWidth,
+                                            textAlign: 'right',
+                                        }), children: (_t = item.text) !== null && _t !== void 0 ? _t : item.at }))] }, index));
                         }) }))] })] }));
 }
 
-export { Knob, Slider, clamp, decimalPart, normalizeValue, rawValue, skewWithCenterValue, stepValue, toFixed };
+export { AnimationCanvas, Knob, NumberInput, Slider, clamp, dbToGain, decimalPart, degree, gainToDb, normalizeValue, radian, rawValue, skewWithCenterValue, stepValue, toFixed };
 //# sourceMappingURL=index.js.map