feat: masks, properties refactor, shaders, storage migrations, and more

apps/web/src/utils/browser.ts

@@ -15,6 +15,20 @@ export function downloadBlob({
 	URL.revokeObjectURL(url);
 }
 
+export function findScrollParent({
+	element,
+}: {
+	element: HTMLElement;
+}): HTMLElement | null {
+	let parent = element.parentElement;
+	while (parent) {
+		const { overflow, overflowX } = window.getComputedStyle(parent);
+		if (/auto|scroll/.test(overflow + overflowX)) return parent;
+		parent = parent.parentElement;
+	}
+	return null;
+}
+
 export function isTypableDOMElement({
 	element,
 }: {

apps/web/src/utils/math.ts

@@ -10,6 +10,41 @@ export function clamp({
 	return Math.max(min, Math.min(max, value));
 }
 
+export function clampRound({
+	value,
+	min,
+	max,
+}: {
+	value: number;
+	min: number;
+	max: number;
+}): number {
+	return Math.round(clamp({ value, min, max }));
+}
+
+function getFractionDigitsForStep({ step }: { step: number }): number {
+	const normalizedStep = step.toString().toLowerCase();
+	if (normalizedStep.includes("e-")) {
+		return Number(normalizedStep.split("e-")[1] ?? 0);
+	}
+	const [, fractionalPart = ""] = normalizedStep.split(".");
+	return fractionalPart.length;
+}
+
+export function snapToStep({
+	value,
+	step,
+}: {
+	value: number;
+	step: number;
+}): number {
+	if (step <= 0) return value;
+	const snappedValue = Math.round(value / step) * step;
+	return Number(
+		snappedValue.toFixed(getFractionDigitsForStep({ step })),
+	);
+}
+
 export function isNearlyEqual({
 	leftValue,
 	rightValue,
@@ -22,6 +57,16 @@ export function isNearlyEqual({
 	return Math.abs(leftValue - rightValue) <= epsilon;
 }
 
+export function formatNumberForDisplay({
+	value,
+	maxFractionDigits = 6,
+}: {
+	value: number;
+	maxFractionDigits?: number;
+}): string {
+	return Number(value.toFixed(maxFractionDigits)).toString();
+}
+
 export function evaluateMathExpression({
 	input,
 }: {