fix(frontend): correct getRandomNumber value rounding

apps/frontend/src/app/gallery/components/GallerySlide/CompareSlider/CompareSlider.tsx

@@ -28,7 +28,7 @@ const getRandomPosition = (index: number): number => {
   const isEven = index % 2 === 0
   const range: [number, number] = isEven ? [40, 60] : [30, 50]
 
-  return Math.floor(getRandomNumber(...range))
+  return getRandomNumber(...range)
 }
 
 const getImageFallback = ({ orientation }: Pick<Props, 'orientation'>): string => {

apps/frontend/src/lib/helpers/__tests__/getRandomNumber.test.ts

@@ -5,11 +5,12 @@ describe('helpers - getRandomNumber', () => {
     [0, 0],
     [0, 10, 2],
     [20, 35],
-    [-10, 20],
+    [-10, 20, -1],
     [10, 10]
   ])('should return a random number value', (...args) => {
-    const [from, to, precision] = args
-    const result = getRandomNumber(from, to, precision)
+    const [from, to, fix] = args
+    const result = getRandomNumber(from, to, fix)
+
     expect(result).not.toBeLessThan(from)
     expect(result).not.toBeGreaterThan(to)
   })

apps/frontend/src/lib/helpers/getRandomNumber.ts

@@ -1,10 +1,17 @@
-export const getRandomNumber = (min: number, max: number, precision?: number): number => {
-  const floating = typeof precision === 'number'
+const MIN_FIX = 0
+const MAX_FIX = 100
+
+export const getRandomNumber = (min: number, max: number, fix: number = 0): number => {
   let randomValue = Math.random() * (max - min) + min
 
-  if (floating) {
-    randomValue = parseFloat(randomValue.toPrecision(precision))
+  if (fix < MIN_FIX) {
+    fix = MIN_FIX
+  }
+  if (fix > MAX_FIX) {
+    fix = MAX_FIX
   }
 
+  randomValue = parseFloat(randomValue.toFixed(fix))
+
   return randomValue
 }

apps/frontend/src/utility/ConvertSettingsRandomizer.ts

@@ -66,7 +66,7 @@ export class ConvertSettingsRandomizer implements Randomizer {
     return randomSettings
   }
 
-  private getRandomNumber(...args: Parameters<typeof getRandomNumber>): number | null {
+  private getRandomNumber(...args: Parameters<typeof getRandomNumber>): number {
     return getRandomNumber(...args)
   }
 
@@ -116,7 +116,7 @@ export class ConvertSettingsRandomizer implements Randomizer {
       }
     }
 
-    const sigma = this.getRandomNumber(MIN_BLUR_SIGMA, MAX_BLUR_SIGMA, 2)
+    const sigma = this.getRandomNumber(MIN_BLUR_SIGMA, MAX_BLUR_SIGMA, 1)
 
     return {
       value,
@@ -125,7 +125,7 @@ export class ConvertSettingsRandomizer implements Randomizer {
   }
 
   getRandomRotate(): RotateOptions {
-    const angle = this.getRandomNumber(MIN_ROTATE_ANGLE, MAX_ROTATE_ANGLE)!
+    const angle = this.getRandomNumber(MIN_ROTATE_ANGLE, MAX_ROTATE_ANGLE)
     const background = this.getRandomHexColor()
     const withDominantBackground = this.getRandomBoolean()
 
@@ -137,9 +137,9 @@ export class ConvertSettingsRandomizer implements Randomizer {
   }
 
   getRandomModulate(): ModulateOptions {
-    const lightness = this.getRandomNumber(MIN_LIGHTNESS, MAX_LIGHTNESS, 2)
-    const brightness = this.getRandomNumber(MIN_BRIGHTNESS, MAX_BRIGHTNESS, 2)
-    const saturation = this.getRandomNumber(MIN_SATURATION, MAX_SATURATION, 2)
+    const lightness = this.getRandomNumber(MIN_LIGHTNESS, MAX_LIGHTNESS)
+    const brightness = this.getRandomNumber(MIN_BRIGHTNESS, MAX_BRIGHTNESS, 1)
+    const saturation = this.getRandomNumber(MIN_SATURATION, MAX_SATURATION, 1)
     const hue = this.getRandomNumber(MIN_HUE, MAX_HUE)
 
     return {
@@ -159,8 +159,8 @@ export class ConvertSettingsRandomizer implements Randomizer {
   }
 
   getRandomNormalise(): NormaliseOptions {
-    let lower = this.getRandomNumber(MIN_NORMALISE, MAX_NORMALISE)!
-    let upper = this.getRandomNumber(MIN_NORMALISE, MAX_NORMALISE)!
+    let lower = this.getRandomNumber(MIN_NORMALISE, MAX_NORMALISE)
+    let upper = this.getRandomNumber(MIN_NORMALISE, MAX_NORMALISE)
 
     const isUpperGreater = upper > lower
     if (!isUpperGreater) [lower, upper] = [upper, lower]

apps/frontend/src/widgets/SettingsPanel/TabConvert/Options/Blur/BlurSigma/BlurSigma.tsx

@@ -24,7 +24,8 @@ export const BlurSigma = ({ disabled }: Props) => {
 
   return (
     <Flex direction='column' align='center' gap='2' width='100%'>
-      <BlurSigmaHeader disabled={disabled} />
+      <BlurSigmaHeader value={sigma} disabled={disabled} />
+
       <Slider
         value={[sigma]}
         defaultValue={[MIN_BLUR_SIGMA]}

apps/frontend/src/widgets/SettingsPanel/TabConvert/Options/Blur/BlurSigma/BlurSigmaHeader/BlurSigmaHeader.tsx

@@ -5,11 +5,15 @@ import { ButtonResetBlurSigma } from './ButtonResetBlurSigma'
 import { ButtonRemoveBlurSigma } from './ButtonRemoveBlurSigma'
 
 interface Props {
+  value: number | null
   disabled: boolean
 }
 
-export const BlurSigmaHeader = ({ disabled }: Props) => (
-  <OptionSectionHeader title='Sigma' icon={<BlurIcon width={18} height={18} />}>
+export const BlurSigmaHeader = ({ value, disabled }: Props) => (
+  <OptionSectionHeader
+    title={value === null ? 'Sigma' : `Sigma: ${value}`}
+    icon={<BlurIcon width={18} height={18} />}
+  >
     <>
       <ButtonResetBlurSigma disabled={disabled} />
       <ButtonRemoveBlurSigma disabled={disabled} />

packages/sharp/src/convert/constants.ts

@@ -36,7 +36,7 @@ export const DEFAULT_NEGATE: NegateOptions = {
 export const MIN_GAMMA = 1
 export const MAX_GAMMA = 3
 export const DEFAULT_GAMMA = 2.2
-export const GAMMA_STEP = 0.1
+export const GAMMA_STEP = 0.01
 
 // Rotate
 export const MIN_ROTATE_ANGLE = -360