@tremolo-ui/react 0.1.4 → 0.1.5

package/dist/index.js

@@ -1,10 +1,8 @@
 import clsx from "clsx";
 import React, { createContext, createRef, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useInsertionEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { clamp, isBlackKey, isWhiteKey, normalizeValue, noteKey, noteKeys, radian, rawValue, stepValue, styleHelper, toFixed, xor } from "@tremolo-ui/functions";
+import { clamp, decimalPart, isBlackKey, isWhiteKey, normalizeValue, noteKey, noteKeys, radian, rawValue, stepValue, styleHelper, toFixed, xor } from "@tremolo-ui/functions";
 import { createStore, useStore } from "zustand";
-import { parseValue } from "@tremolo-ui/functions/NumberInput";
-import { generateOptionsList } from "@tremolo-ui/functions/Slider";
 
 //#region src/components/AnimationCanvas/canvas.ts
 const drawingState = [
@@ -27,9 +25,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;
@@ -38,7 +33,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 = useRef(null);
 	const memoCanvasRef = useRef(null);
 	const reqIdRef = useRef(-1);
@@ -46,27 +44,40 @@ function AnimationCanvas({ options, init, draw, width = 100, height = 100, relat
 	const heightRef = useRef(0);
 	const deltaMemoRef = useRef(-1);
 	const startTimeRef = useRef(-1);
-	const loop = useCallback((context, width$1, height$1, count) => {
+	const loop = 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]);
 	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.");
@@ -74,52 +85,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);
 			};
@@ -129,12 +125,13 @@ function AnimationCanvas({ options, init, draw, width = 100, height = 100, relat
 		init,
 		options,
 		reduceFlickering,
-		relativeSize
+		relativeSize,
+		animate
 	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("canvas", {
 		className: clsx("tremolo-animation-canvas", className),
-		width: relativeSize ? 0 : width,
-		height: relativeSize ? 0 : height,
+		width: relativeSize ? 0 : _width,
+		height: relativeSize ? 0 : _height,
 		ref: canvasRef,
 		onContextMenu,
 		...props
@@ -614,6 +611,47 @@ const Knob = forwardRef(({ value, min, max, step = 1, skew = 1, defaultValue = m
 	});
 });
 
+//#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$1 = 0;
+	let unit = unitList[0];
+	let formatValue = (digit != void 0 ? rawValue$1.toFixed(digit) : rawValue$1) + unit;
+	const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/);
+	if (m) {
+		rawValue$1 = Number(m[1]) || 0;
+		const uIndex = unitList.indexOf(m[3]);
+		rawValue$1 *= uIndex != -1 ? scaleList[uIndex] : 1;
+		const [u, scale] = selectUnit(units, rawValue$1);
+		const v = rawValue$1 / scale;
+		formatValue = (digit != void 0 ? v.toFixed(digit) : v) + u;
+		unit = u;
+	}
+	return {
+		rawValue: rawValue$1,
+		formatValue,
+		unit
+	};
+}
+
 //#endregion
 //#region src/components/NumberInput/context.tsx
 function safeClamp(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
@@ -1461,6 +1499,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 = toFixed(per * (Math.ceil(min / per) + i), decimalPart(per)?.length);
+		optionsList.push({
+			value,
+			type: options[1]
+		});
+	}
+	return optionsList;
+}
+
 //#endregion
 //#region src/components/Slider/Scale.tsx
 /** @category Slider */