Show density/noise value at cursor (#282)

* Fix #277 WIP show density at cursor

* Correctly implement hovered value for noise and df previews

src/app/components/previews/DensityFunctionPreview.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'preact/hooks'
 import { useLocale, useProject } from '../../contexts/index.js'
 import { useCanvas } from '../../hooks/index.js'
-import { densityFunction } from '../../previews/index.js'
+import { densityFunction, densityPoint } from '../../previews/index.js'
 import { randomSeed } from '../../Utils.js'
 import { Btn, BtnMenu } from '../index.js'
 import type { PreviewProps } from './index.js'
@@ -10,19 +10,21 @@ export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) =
 	const { locale } = useLocale()
 	const { project } = useProject()
 	const [seed, setSeed] = useState(randomSeed())
+	const [minY] = useState(0)
+	const [height] = useState(256)
 	const [autoScroll, setAutoScroll] = useState(false)
-	const [focused, setFocused] = useState<string | undefined>(undefined)
+	const [focused, setFocused] = useState<string[]>([])
 	const offset = useRef(0)
 	const scrollInterval = useRef<number | undefined>(undefined)
 	const state = JSON.stringify([data])
 
-	const size = data?.noise?.height ?? 256
+	const size = 256
 	const { canvas, redraw } = useCanvas({
 		size() {
 			return [size, size]
 		},
 		async draw(img) {
-			const options = { offset: offset.current, width: img.width, seed, version, project }
+			const options = { offset: offset.current, width: img.width, seed, version, project, minY, height }
 			await densityFunction(data, img, options)
 		},
 		async onDrag(dx) {
@@ -30,14 +32,16 @@ export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) =
 			redraw()
 		},
 		async onHover(x, y) {
-			const worldX = Math.floor(x * size - offset.current)
-			const worldY = size - Math.max(1, Math.ceil(y * size)) + (data?.noise?.min_y ?? 0)
-			setFocused(`X=${worldX} Y=${worldY}`)
+			const worldX = Math.floor(x * size)
+			const worldY = Math.floor(y * (height - minY))
+			const options = { offset: offset.current, width: size, seed, version, project, minY, height }
+			const density = await densityPoint(data, worldX, worldY, options)
+			setFocused([density.toPrecision(3), `X=${Math.floor(worldX - offset.current)} Y=${(height - minY) - worldY}`])
 		},
 		onLeave() {
-			setFocused(undefined)
+			setFocused([])
 		},
-	}, [version, state, seed, project])
+	}, [version, state, seed, minY, height, project])
 
 	useEffect(() => {
 		if (scrollInterval.current) {
@@ -52,11 +56,11 @@ export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) =
 				}, 100) as any
 			}
 		}
-	}, [version, state, seed, project, shown, autoScroll])
+	}, [version, state, seed, minY, height, project, shown, autoScroll])
 
 	return <>
 		<div class="controls preview-controls">
-			{focused && <Btn label={focused} class="no-pointer" />}
+			{focused.map(s => <Btn label={s} class="no-pointer" /> )}
 			<BtnMenu icon="gear" tooltip={locale('terrain_settings')}>
 				<Btn icon={autoScroll ? 'square_fill' : 'square'} label={locale('preview.auto_scroll')} onClick={() => setAutoScroll(!autoScroll)} />
 			</BtnMenu>

src/app/components/previews/NoisePreview.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'preact/hooks'
 import { useLocale } from '../../contexts/index.js'
 import { useCanvas } from '../../hooks/index.js'
-import { normalNoise } from '../../previews/index.js'
+import { normalNoise, normalNoisePoint } from '../../previews/index.js'
 import { randomSeed } from '../../Utils.js'
 import { Btn } from '../index.js'
 import type { PreviewProps } from './index.js'
@@ -10,6 +10,7 @@ export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
 	const { locale } = useLocale()
 	const [seed, setSeed] = useState(randomSeed())
 	const [scale, setScale] = useState(2)
+	const [focused, setFocused] = useState<string[]>([])
 	const offset = useRef<[number, number]>([0, 0])
 	const state = JSON.stringify([data])
 
@@ -26,6 +27,21 @@ export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
 			offset.current[1] = offset.current[1] + dy * 256
 			redraw()
 		},
+		onHover(x, y) {
+			const x2 = Math.floor(x * 256)
+			const y2 = Math.floor(y * 256)
+			const options = { offset: offset.current, scale, seed, version }
+			const value = normalNoisePoint(data, x2, y2, options)
+			
+			const ox = -options.offset[0] - 100
+			const oy = -options.offset[1] - 100
+			const xx = (x2 + ox) * options.scale
+			const yy = (y2 + oy) * options.scale
+			setFocused([value.toPrecision(3), `X=${Math.floor(xx)} Y=${Math.floor(yy)}`])
+		},
+		onLeave() {
+			setFocused([])
+		},
 	}, [version, state, scale, seed])
 
 	useEffect(() => {
@@ -42,6 +58,7 @@ export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
 
 	return <>
 		<div class="controls preview-controls">
+			{focused.map(s => <Btn label={s} class="no-pointer" /> )}
 			<Btn icon="dash" tooltip={locale('zoom_out')}
 				onClick={() => changeScale(scale * 1.5)} />
 			<Btn icon="plus" tooltip={locale('zoom_in')}