@tremolo-ui/react 0.1.3 → 0.1.5

package/dist/index.cjs

@@ -26,8 +26,6 @@ const react = __toESM(require("react"));
 const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
 const __tremolo_ui_functions = __toESM(require("@tremolo-ui/functions"));
 const zustand = __toESM(require("zustand"));
-const __tremolo_ui_functions_NumberInput = __toESM(require("@tremolo-ui/functions/NumberInput"));
-const __tremolo_ui_functions_Slider = __toESM(require("@tremolo-ui/functions/Slider"));
 
 //#region src/components/AnimationCanvas/canvas.ts
 const drawingState = [
@@ -50,9 +48,6 @@ const drawingState = [
 	"direction",
 	"imageSmoothingEnabled"
 ];
-
-//#endregion
-//#region src/components/AnimationCanvas/index.tsx
 function setDprConfig(canvas, context, width, height, dpr) {
 	canvas.width = width * dpr;
 	canvas.height = height * dpr;
@@ -61,7 +56,10 @@ function setDprConfig(canvas, context, width, height, dpr) {
 	canvas.style.width = `${width}px`;
 	canvas.style.height = `${height}px`;
 }
-function AnimationCanvas({ options, init, draw, width = 100, height = 100, relativeSize, reduceFlickering = true, className, onContextMenu = (event) => event.preventDefault(),...props }) {
+
+//#endregion
+//#region src/components/AnimationCanvas/index.tsx
+function AnimationCanvas({ draw, init, animate = true, options, width: _width = 100, height: _height = 100, relativeSize, reduceFlickering = true, className, onContextMenu = (event) => event.preventDefault(),...props }) {
 	const canvasRef = (0, react.useRef)(null);
 	const memoCanvasRef = (0, react.useRef)(null);
 	const reqIdRef = (0, react.useRef)(-1);
@@ -69,27 +67,40 @@ function AnimationCanvas({ options, init, draw, width = 100, height = 100, relat
 	const heightRef = (0, react.useRef)(0);
 	const deltaMemoRef = (0, react.useRef)(-1);
 	const startTimeRef = (0, react.useRef)(-1);
-	const loop = (0, react.useCallback)((context, width$1, height$1, count) => {
+	const loop = (0, react.useCallback)((context, width, height, count) => {
 		const now = performance.now();
 		const deltaTime = now - deltaMemoRef.current;
 		const elapsedTime = now - startTimeRef.current;
 		deltaMemoRef.current = now;
-		reqIdRef.current = requestAnimationFrame(() => loop(context, width$1, height$1, count + 1));
+		if (animate) reqIdRef.current = requestAnimationFrame(() => loop(context, width, height, count + 1));
 		draw(context, {
-			width: width$1.current,
-			height: height$1.current,
+			width: width.current,
+			height: height.current,
 			count: count + 1,
 			deltaTime,
 			elapsedTime,
 			fps: 1e3 / deltaTime
 		});
-	}, [draw]);
+	}, [draw, animate]);
 	(0, react.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 = globalThis.devicePixelRatio;
+		const firstRendering = (width, height) => {
+			setDprConfig(canvas, context, width, height, dpr);
+			widthRef.current = width;
+			heightRef.current = height;
+			if (init) init(context, {
+				width,
+				height
+			});
+			const now = performance.now();
+			deltaMemoRef.current = now;
+			startTimeRef.current = now;
+			loop(context, widthRef, heightRef, -1);
+		};
 		if (relativeSize) {
 			const parent = canvas.parentElement;
 			if (!parent) throw new Error("Canvas doesn't have a parent element.");
@@ -97,52 +108,37 @@ function AnimationCanvas({ options, init, draw, width = 100, height = 100, relat
 			const memoContext = memoCanvas?.getContext("2d", options);
 			const ro = new ResizeObserver((entries) => {
 				for (const entry of entries) {
+					const w = entry.contentRect.width;
+					const h = entry.contentRect.height;
 					const contextMemo = {};
-					for (const prop of drawingState) contextMemo[prop] = context[prop];
-					const w$1 = entry.contentRect.width;
-					const h$1 = entry.contentRect.height;
 					if (reduceFlickering && memoCanvas && memoContext) {
-						memoCanvas.width = w$1 * dpr;
-						memoCanvas.height = h$1 * dpr;
+						for (const prop of drawingState) contextMemo[prop] = context[prop];
+						memoCanvas.width = w * dpr;
+						memoCanvas.height = h * dpr;
 						memoContext.scale(1 / dpr, 1 / dpr);
 						if (canvas.width > 0 && canvas.height > 0) memoContext.drawImage(canvas, 0, 0);
 					}
-					setDprConfig(canvas, context, w$1, h$1, dpr);
-					widthRef.current = w$1;
-					heightRef.current = h$1;
-					for (const prop of drawingState) context[prop] = contextMemo[prop];
-					if (reduceFlickering && memoContext && memoCanvas && memoCanvas.width > 0 && memoCanvas.height > 0) context.drawImage(memoContext.canvas, 0, 0);
+					setDprConfig(canvas, context, w, h, dpr);
+					widthRef.current = w;
+					heightRef.current = h;
+					if (reduceFlickering && memoContext && memoCanvas && memoCanvas.width > 0 && memoCanvas.height > 0) {
+						for (const prop of drawingState) context[prop] = contextMemo[prop];
+						context.drawImage(memoContext.canvas, 0, 0);
+					}
+					if (!animate) loop(context, widthRef, heightRef, -1);
 				}
 			});
 			ro.observe(parent);
-			const w = parent.clientWidth;
-			const h = parent.clientHeight;
-			setDprConfig(canvas, context, w, h, dpr);
-			if (init) init(context, {
-				width: widthRef.current,
-				height: heightRef.current
-			});
-			const now = performance.now();
-			deltaMemoRef.current = now;
-			startTimeRef.current = now;
-			loop(context, widthRef, heightRef, -1);
+			const width = parent.clientWidth;
+			const height = parent.clientHeight;
+			firstRendering(width, height);
 			return () => {
 				if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current);
 				ro.disconnect();
 			};
 		} 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, {
-				width: widthRef.current,
-				height: heightRef.current
-			});
-			const now = performance.now();
-			deltaMemoRef.current = now;
-			startTimeRef.current = now;
-			loop(context, widthRef, heightRef, -1);
+			const { width, height } = canvas.getBoundingClientRect();
+			firstRendering(width, height);
 			return () => {
 				if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current);
 			};
@@ -152,12 +148,13 @@ function AnimationCanvas({ options, init, draw, width = 100, height = 100, relat
 		init,
 		options,
 		reduceFlickering,
-		relativeSize
+		relativeSize,
+		animate
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 		className: (0, clsx.default)("tremolo-animation-canvas", className),
-		width: relativeSize ? 0 : width,
-		height: relativeSize ? 0 : height,
+		width: relativeSize ? 0 : _width,
+		height: relativeSize ? 0 : _height,
 		ref: canvasRef,
 		onContextMenu,
 		...props
@@ -637,6 +634,47 @@ const Knob = (0, react.forwardRef)(({ value, min, max, step = 1, skew = 1, defau
 	});
 });
 
+//#endregion
+//#region src/components/NumberInput/type.ts
+function selectUnit(units, value) {
+	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) {
+	const str = inputString.trim();
+	if (!units || typeof units == "string") {
+		const m$1 = str.match(/-?\d+(\.\d+)?/);
+		let v = Number(m$1?.[0] ?? "0");
+		v = isNaN(v) ? 0 : v;
+		return {
+			rawValue: v,
+			formatValue: (digit != void 0 ? v.toFixed(digit) : v) + (units ?? ""),
+			unit: units ?? ""
+		};
+	}
+	const unitList = units.map(([u, _s]) => u);
+	const scaleList = units.map(([_u, s]) => s);
+	let rawValue$5 = 0;
+	let unit = unitList[0];
+	let formatValue = (digit != void 0 ? rawValue$5.toFixed(digit) : rawValue$5) + unit;
+	const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
+	if (m) {
+		rawValue$5 = Number(m[1]) || 0;
+		const uIndex = unitList.indexOf(m[3]);
+		rawValue$5 *= uIndex != -1 ? scaleList[uIndex] : 1;
+		const [u, scale] = selectUnit(units, rawValue$5);
+		const v = rawValue$5 / scale;
+		formatValue = (digit != void 0 ? v.toFixed(digit) : v) + u;
+		unit = u;
+	}
+	return {
+		rawValue: rawValue$5,
+		formatValue,
+		unit
+	};
+}
+
 //#endregion
 //#region src/components/NumberInput/context.tsx
 function safeClamp(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
@@ -656,14 +694,14 @@ const createNumberInputStore = (initProps) => {
 	return (0, zustand.createStore)()((set) => ({
 		...DEFAULT_PROPS,
 		...initProps,
-		value: (0, __tremolo_ui_functions_NumberInput.parseValue)(String(initProps?.value || ""), initProps?.units, initProps?.digit).formatValue,
-		valueAsNumber: (0, __tremolo_ui_functions_NumberInput.parseValue)(String(initProps?.value || ""), initProps?.units, initProps?.digit).rawValue,
+		value: parseValue(String(initProps?.value || ""), initProps?.units, initProps?.digit).formatValue,
+		valueAsNumber: parseValue(String(initProps?.value || ""), initProps?.units, initProps?.digit).rawValue,
 		increment: () => set((state) => {
 			if (state.readonly) return {};
-			const current = (0, __tremolo_ui_functions_NumberInput.parseValue)(state.value, state.units, state.digit).rawValue;
+			const current = parseValue(state.value, state.units, state.digit).rawValue;
 			let next = current + (state.step ?? 1);
 			if (state.keepWithinRange) next = safeClamp(next, state.min, state.max);
-			const v = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(next), state.units, state.digit).formatValue;
+			const v = parseValue(String(next), state.units, state.digit).formatValue;
 			state?.onChange?.(next, v);
 			return {
 				value: v,
@@ -672,10 +710,10 @@ const createNumberInputStore = (initProps) => {
 		}),
 		decrement: () => set((state) => {
 			if (state.readonly) return {};
-			const current = (0, __tremolo_ui_functions_NumberInput.parseValue)(state.value, state.units, state.digit).rawValue;
+			const current = parseValue(state.value, state.units, state.digit).rawValue;
 			let next = current - (state.step ?? 1);
 			if (state.keepWithinRange) next = safeClamp(next, state.min, state.max);
-			const v = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(next), state.units, state.digit).formatValue;
+			const v = parseValue(String(next), state.units, state.digit).formatValue;
 			state?.onChange?.(next, v);
 			return {
 				value: v,
@@ -687,7 +725,7 @@ const createNumberInputStore = (initProps) => {
 			const v = value ?? "";
 			return {
 				value: v,
-				valueAsNumber: (0, __tremolo_ui_functions_NumberInput.parseValue)(v, state.units, state.digit).rawValue
+				valueAsNumber: parseValue(v, state.units, state.digit).rawValue
 			};
 		})
 	}));
@@ -698,7 +736,7 @@ function NumberInputProvider({ children,...props }) {
 	if (!storeRef.current) storeRef.current = createNumberInputStore(props);
 	(0, react.useEffect)(() => {
 		if (storeRef.current) {
-			const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(props?.value || ""), props?.units, props?.digit);
+			const parsed = parseValue(String(props?.value || ""), props?.units, props?.digit);
 			storeRef.current.setState({
 				...props,
 				value: parsed.formatValue,
@@ -764,7 +802,7 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 		if (!["ArrowUp", "ArrowDown"].includes(key)) return;
 		event.preventDefault();
 		const x = key == "ArrowUp" ? keyboard[1] : -keyboard[1];
-		const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(updateValueByEvent(keyboard[0], x)));
+		const parsed = parseValue(String(updateValueByEvent(keyboard[0], x)));
 		onChange?.(parsed.rawValue, parsed.formatValue);
 	}, [
 		keyboard,
@@ -777,7 +815,7 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 		event.preventDefault();
 		if (!onChange || event.deltaY == 0) return;
 		const x = Math.sign(event.deltaY) * -wheel[1];
-		const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(updateValueByEvent(wheel[0], x)));
+		const parsed = parseValue(String(updateValueByEvent(wheel[0], x)));
 		onChange?.(parsed.rawValue, parsed.formatValue);
 	}, { passive: false }, [
 		wheel,
@@ -815,7 +853,7 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 			const v = event.currentTarget.value;
 			const cursorPos = event.target.selectionStart;
 			change(v);
-			const valueAsNumber$1 = (0, __tremolo_ui_functions_NumberInput.parseValue)(v, units, digit).rawValue;
+			const valueAsNumber$1 = parseValue(v, units, digit).rawValue;
 			onChange?.(valueAsNumber$1, v);
 			if (cursorPos) {
 				event.target.selectionStart = cursorPos;
@@ -825,16 +863,16 @@ const InternalInput = (0, react.forwardRef)(({ disabled, readonly, selectWithFoc
 		onFocus: (event) => {
 			setEditing(true);
 			const v = event.currentTarget.value;
-			const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(v, units, digit);
+			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);
 			onFocus?.(parsed.rawValue, parsed.formatValue, event);
 		},
 		onBlur: (event) => {
 			setEditing(false);
-			let v = (0, __tremolo_ui_functions_NumberInput.parseValue)(event.currentTarget.value, units, digit).rawValue;
+			let v = parseValue(event.currentTarget.value, units, digit).rawValue;
 			if (clampValueOnBlur) v = safeClamp(v, min, max);
-			const parsed = (0, __tremolo_ui_functions_NumberInput.parseValue)(String(v), units, digit);
+			const parsed = parseValue(String(v), units, digit);
 			change(parsed.formatValue);
 			if (clampValueOnBlur) onChange?.(parsed.rawValue, parsed.formatValue);
 			onBlur?.(parsed.rawValue, parsed.formatValue, event);
@@ -1484,6 +1522,22 @@ function ScaleOption({ value, type = "mark-number", label, thickness = 1, length
 	});
 }
 
+//#endregion
+//#region src/components/Slider/type.ts
+function generateOptionsList(options, min, max, step) {
+	const optionsList = [];
+	const per = options[0] == "step" ? step : options[0];
+	const count = Math.floor(max / per) - Math.ceil(min / per) + 1;
+	for (let i = 0; i < count; i++) {
+		const value = (0, __tremolo_ui_functions.toFixed)(per * (Math.ceil(min / per) + i), (0, __tremolo_ui_functions.decimalPart)(per)?.length);
+		optionsList.push({
+			value,
+			type: options[1]
+		});
+	}
+	return optionsList;
+}
+
 //#endregion
 //#region src/components/Slider/Scale.tsx
 /** @category Slider */
@@ -1493,7 +1547,7 @@ function Scale({ gap = 6, options, children, className, style,...props }) {
 	const step = useSliderContext((s) => s.step);
 	const vertical = useSliderContext((s) => s.vertical);
 	const reverse = useSliderContext((s) => s.reverse);
-	const optionsList = options ? (0, __tremolo_ui_functions_Slider.generateOptionsList)(options, min, max, step) : [];
+	const optionsList = options ? generateOptionsList(options, min, max, step) : [];
 	if ((0, __tremolo_ui_functions.xor)(vertical, reverse)) optionsList.reverse();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, clsx.default)("tremolo-slider-scale", className),