@tremolo-ui/react 0.0.3 → 0.0.4

package/dist/cjs/index.js

@@ -4,57 +4,6 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var react = require('@emotion/react');
 var React = require('react');
 
-function clamp(value, min, max) {
-    return Math.max(min, Math.min(value, max));
-}
-function normalizeValue(rawValue, min, max, skew = 1) {
-    if (min >= max)
-        throw new RangeError('requirements: min < max');
-    const v = clamp((rawValue - min) / (max - min), 0, 1);
-    return Math.pow(v, skew);
-}
-function rawValue(normalizedValue, min, max, skew = 1) {
-    if (min >= max)
-        throw new RangeError('requirements: min < max');
-    const v = skew == 1
-        ? clamp(normalizedValue, 0, 1)
-        : Math.exp(Math.log(clamp(normalizedValue, 0, 1)) / skew);
-    return min + v * (max - min);
-}
-function skewWithCenterValue(centerValue, min, max) {
-    if (!(min <= centerValue && centerValue <= max))
-        throw new RangeError('requirements: min <= centerValue <= max');
-    return Math.log(0.5) / Math.log((centerValue - min) / (max - min));
-}
-function stepValue(value, step) {
-    var _a;
-    if (step <= 0)
-        throw new RangeError('requirements: step > 0');
-    const quotient = Math.floor(value / step);
-    const decimalDigits = (_a = decimalPart(step)) === null || _a === void 0 ? void 0 : _a.length;
-    const v = toFixed(quotient * step, decimalDigits);
-    const next = toFixed((quotient + 1) * step, decimalDigits);
-    return Math.abs(value - v) < Math.abs(value - next) ? v : next;
-}
-function toFixed(x, fractionDigits) {
-    return Number(x.toFixed(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.
 
@@ -89,6 +38,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
 // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
 const drawingState = [
     'strokeStyle',
@@ -122,7 +73,7 @@ function setDprConfig(canvas, context, width, height, dpr) {
  * 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"]);
+    var { width = 100, height = 100, style, relativeSize = false, reduceFlickering = true, options, init, draw, className } = _a, props = __rest(_a, ["width", "height", "style", "relativeSize", "reduceFlickering", "options", "init", "draw", "className"]);
     const canvasRef = React.useRef(null);
     const memoCanvasRef = React.useRef(null);
     const reqIdRef = React.useRef();
@@ -147,7 +98,7 @@ function AnimationCanvas(_a) {
             const memoCanvas = memoCanvasRef.current;
             const memoContext = memoCanvas === null || memoCanvas === void 0 ? void 0 : memoCanvas.getContext('2d', options);
             const resizeObserver = new ResizeObserver(() => {
-                console.log('resize');
+                // console.log('resize')
                 // Prevents loss of some context when the canvas is resized
                 const contextMemo = {};
                 for (const prop of drawingState) {
@@ -198,7 +149,70 @@ function AnimationCanvas(_a) {
             };
         }
     }, [loop]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("canvas", Object.assign({ width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, css: react.css(style), ref: canvasRef }, props)), relativeSize && reduceFlickering && (jsxRuntime.jsx("canvas", { style: { display: 'none' }, width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, ref: memoCanvasRef }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("canvas", Object.assign({ className: clsx('tremolo-animation-canvas', className), width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, css: react.css(style), ref: canvasRef }, props)), relativeSize && reduceFlickering && (jsxRuntime.jsx("canvas", { style: { display: 'none' }, width: relativeSize ? 0 : width, height: relativeSize ? 0 : height, ref: memoCanvasRef }))] }));
+}
+
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+function normalizeValue(rawValue, min, max, skew = 1) {
+    if (min >= max)
+        throw new RangeError('requirements: min < max');
+    const v = clamp((rawValue - min) / (max - min), 0, 1);
+    return Math.pow(v, skew);
+}
+function rawValue(normalizedValue, min, max, skew = 1) {
+    if (min >= max)
+        throw new RangeError('requirements: min < max');
+    const v = skew == 1
+        ? clamp(normalizedValue, 0, 1)
+        : Math.exp(Math.log(clamp(normalizedValue, 0, 1)) / skew);
+    return min + v * (max - min);
+}
+function stepValue(value, step) {
+    var _a;
+    if (step <= 0)
+        throw new RangeError('requirements: step > 0');
+    const quotient = Math.floor(value / step);
+    const decimalDigits = (_a = decimalPart$1(step)) === null || _a === void 0 ? void 0 : _a.length;
+    const v = toFixed$2(quotient * step, decimalDigits);
+    const next = toFixed$2((quotient + 1) * step, decimalDigits);
+    return Math.abs(value - v) < Math.abs(value - next) ? v : next;
+}
+function toFixed$2(x, fractionDigits) {
+    return Number(x.toFixed(fractionDigits));
+}
+function decimalPart$1(x) {
+    return String(x).split('.')[1];
+}
+function radian(degree) {
+    return (Math.PI * degree) / 180;
+}
+
+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;
+        }
+    }
 }
 
 /**
@@ -260,9 +274,7 @@ const defaultOptions = {
  * 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"]);
+    var { value, min, max, defaultValue = min, startValue = min, step = 1, skew = 1, size, width = 50, height = 50, options = defaultOptions, draw, bodyNoSelect = true, enableWheel, enableDoubleClickDefault = true, style, className, onChange, _active, _focus, _hover } = _a, props = __rest(_a, ["value", "min", "max", "defaultValue", "startValue", "step", "skew", "size", "width", "height", "options", "draw", "bodyNoSelect", "enableWheel", "enableDoubleClickDefault", "style", "className", "onChange", "_active", "_focus", "_hover"]);
     // -- state and ref ---
     // const [privateValue, setPrivateValue] = useState(value);
     const dragOffsetY = React.useRef(undefined);
@@ -319,10 +331,10 @@ function Knob(_a) {
         if (bodyNoSelect)
             document.body.classList.remove('no-select');
     });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: "tremolo-knob", ref: (div) => {
+    return (jsxRuntime.jsxs("div", Object.assign({ className: clsx('tremolo-knob', className), ref: (div) => {
             wheelRefCallback(div);
             touchMoveRefCallback(div);
-        }, role: "slider", tabIndex: 0, "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": min, css: react.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) => {
+        }, role: "slider", tabIndex: 0, "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": min, css: react.css(Object.assign(Object.assign({ display: 'block', width: size !== null && size !== void 0 ? size : width, height: size !== null && size !== void 0 ? size : height, cursor: 'pointer' }, style), { ':active': Object.assign({}, _active), ':focus': Object.assign({}, _focus), ':hover': Object.assign({}, _hover) })), onPointerDown: (event) => {
             dragOffsetY.current = event.screenY;
             handleEvent(event);
         }, onDoubleClick: () => {
@@ -336,11 +348,11 @@ function Knob(_a) {
                 } }), jsxRuntime.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) => {
+                draw: draw ? draw : (ctx, width, height) => {
                     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 w = width.current, cx = w / 2;
+                    const h = height.current, cy = h / 2;
                     const r = Math.min(cx, cy);
                     if (r <= 0)
                         return;
@@ -378,6 +390,10 @@ function Knob(_a) {
                 } })] })));
 }
 
+function toFixed$1(x, fractionDigits) {
+    return Number(x.toFixed(fractionDigits));
+}
+
 function selectUnit(units, value) {
     if (typeof units == 'string')
         return [units, 1];
@@ -388,27 +404,30 @@ function selectUnit(units, value) {
     }
     return units[Math.max(0, i - 1)];
 }
-function parseValue(inputString, units, digit) {
+function parseValue(inputString, units, digit, defaultValue = 0) {
+    let str = inputString.trim();
+    if (str == '')
+        str = String(defaultValue);
     if (!units) {
         return {
-            rawValue: Number(inputString.trim()) || 0,
-            formatValue: inputString.trim(),
+            rawValue: Number(str) || defaultValue,
+            formatValue: str,
             unit: '',
         };
     }
     else if (typeof units == 'string') {
         return {
-            rawValue: Number(inputString.trim()) || 0,
-            formatValue: `${inputString.trim()}${units}`,
+            rawValue: Number(str) || defaultValue,
+            formatValue: `${str}${units}`,
             unit: units,
         };
     }
     const unitList = units.map(([u, _s]) => u);
     const scaleList = units.map(([_u, s]) => s);
-    let rawValue = 0;
+    let rawValue = defaultValue;
     let formatValue = `${scaleList[0]}`;
     let unit = unitList[0];
-    const m = inputString.trim().match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
+    const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
     if (m) {
         rawValue = Number(m[1]) || 0;
         const inputUnit = m[3];
@@ -416,13 +435,13 @@ function parseValue(inputString, units, digit) {
             rawValue *= scaleList[unitList.indexOf(inputUnit)];
             const s = selectUnit(units, rawValue);
             const v = rawValue / s[1];
-            formatValue = `${digit != undefined ? toFixed(v, digit) : v}${s[0]}`;
+            formatValue = `${digit != undefined ? toFixed$1(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}`;
+            formatValue = `${digit != undefined ? toFixed$1(v, digit) : v}${u}`;
             unit = u;
         }
     }
@@ -437,21 +456,19 @@ function parseValue(inputString, units, digit) {
  * 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] = React.useState(parseValue(String(value), units, digit).formatValue);
+    var { value, min, max, step, defaultValue = min, 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", "defaultValue", "units", "disabled", "placeholder", "readOnly", "tabIndex", "strict", "digit", "selectWithFocus", "blurWithEnter", "className", "style", "onChange", "onFocus", "onBlur"]);
+    const [showValue, setShowValue] = React.useState(parseValue(String(value), units, digit, defaultValue).formatValue);
     const calculatedStrict = units ? false : strict;
     const { _active, _focus, _hover } = pseudo;
-    return (jsxRuntime.jsx("input", { className: 'tremolo-slider' + (className ? ` ${className}` : ''), value: showValue, type: calculatedStrict ? 'number' : 'text', spellCheck: 'false', disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, css: react.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) => {
+    return (jsxRuntime.jsx("input", { className: clsx('tremolo-number-input', className), value: showValue, min: min, max: max, step: step, type: calculatedStrict ? 'number' : 'text', spellCheck: 'false', disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, css: react.css(Object.assign(Object.assign({ display: 'block', font: 'inherit', margin: 0, paddingTop: 6, paddingBottom: 6, paddingLeft: 10, paddingRight: 10, borderStyle: 'solid', borderWidth: 1, borderColor: '#bbb', borderRadius: 4, outline: 0, transition: 'all 0.1s linear', appearance: 'textfield', '&:hover': Object.assign({ borderColor: 'var(--tremolo-theme-color)' }, _hover), '&:focus': Object.assign({ borderColor: 'var(--tremolo-theme-color)', boxShadow: '0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1)' }, _focus) }, (_active && { '&:active': Object.assign({}, _active) })), style)), onChange: (event) => {
             const v = event.currentTarget.value;
             setShowValue(v);
+            const newValue = clamp(parseValue(v, units, digit, defaultValue).rawValue, min !== null && min !== void 0 ? min : -Infinity, max !== null && max !== void 0 ? max : Infinity);
             if (onChange)
-                onChange(parseValue(v, units, digit).rawValue, event);
+                onChange(newValue, event);
         }, onFocus: (event) => {
             const v = event.currentTarget.value;
-            const parsed = parseValue(v, units, digit);
+            const parsed = parseValue(v, units, digit, defaultValue);
             if (selectWithFocus == 'all') {
                 event.currentTarget.setSelectionRange(0, v.length);
             }
@@ -463,7 +480,7 @@ function NumberInput(_a) {
         }, onBlur: (event) => {
             // update value
             const v = event.currentTarget.value;
-            const parsed = parseValue(v, units, digit);
+            const parsed = parseValue(v, units, digit, defaultValue);
             setShowValue(parsed.formatValue);
             if (onBlur)
                 onBlur(parsed.rawValue, event);
@@ -474,6 +491,13 @@ function NumberInput(_a) {
         } }));
 }
 
+function toFixed(x, fractionDigits) {
+    return Number(x.toFixed(fractionDigits));
+}
+function decimalPart(x) {
+    return String(x).split('.')[1];
+}
+
 function isHorizontal(d) {
     return d == 'right' || d == 'left';
 }
@@ -509,38 +533,16 @@ function parseScaleOrderList(scale, min, max, step) {
     return scalesList;
 }
 
-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 SliderThumb({ color, children, style, __css, }) {
     return (jsxRuntime.jsx("div", { className: "tremolo-slider-thumb-wrapper", css: react.css(Object.assign({ width: 'fit-content', height: 'fit-content', position: 'absolute', translate: '-50% -50%', zIndex: 100 }, __css)), children: children ? (children) : (
         // default slider thumb
         jsxRuntime.jsx("div", { className: "tremolo-slider-thumb", 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, css: react.css(Object.assign({ background: color, width: '1.4rem', height: '1.4rem', borderRadius: '50%' }, style)) })) }));
+            tabIndex: 0, css: react.css(Object.assign({ background: color, width: '1.4rem', height: '1.4rem', borderRadius: '50%', '&:hover': {
+                    background: `color-mix(in srgb, ${color} 95%, black)`
+                }, '&:active': {
+                    boxShadow: '0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2)',
+                } }, style)) })) }));
 }
 
 function SliderTrack({ children, style, __css, }) {
@@ -632,7 +634,7 @@ function Slider(_a) {
         if (bodyNoSelect)
             document.body.classList.remove('no-select');
     });
-    return (jsxRuntime.jsxs("div", { className: 'tremolo-slider' + (className ? ` ${className}` : ''), ref: (div) => {
+    return (jsxRuntime.jsxs("div", { className: clsx('tremolo-slider', 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: react.css(Object.assign({ display: 'inline-block', boxSizing: 'border-box', margin: '0.7rem', padding: 0, cursor: 'pointer' }, style)), onPointerDown: (event) => {
@@ -705,15 +707,7 @@ exports.AnimationCanvas = AnimationCanvas;
 exports.Knob = Knob;
 exports.NumberInput = NumberInput;
 exports.Slider = Slider;
-exports.clamp = clamp;
-exports.dbToGain = dbToGain;
-exports.decimalPart = decimalPart;
-exports.degree = degree;
-exports.gainToDb = gainToDb;
-exports.normalizeValue = normalizeValue;
-exports.radian = radian;
-exports.rawValue = rawValue;
-exports.skewWithCenterValue = skewWithCenterValue;
-exports.stepValue = stepValue;
-exports.toFixed = toFixed;
+exports.SliderThumb = SliderThumb;
+exports.SliderTrack = SliderTrack;
+exports.gradientDirection = gradientDirection;
 //# sourceMappingURL=index.js.map