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/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')}