mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 23:27:09 +00:00
77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import { useEffect, useRef, useState } from 'preact/hooks'
|
|
import { useLocale, useProject } from '../../contexts/index.js'
|
|
import { useCanvas } from '../../hooks/index.js'
|
|
import type { ColormapType } from '../../previews/Colormap.js'
|
|
import { densityFunction, densityPoint } from '../../previews/index.js'
|
|
import { randomSeed } from '../../Utils.js'
|
|
import { Btn, BtnMenu } from '../index.js'
|
|
import { ColormapSelector } from './ColormapSelector.jsx'
|
|
import type { PreviewProps } from './index.js'
|
|
|
|
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[]>([])
|
|
const [colormap, setColormap] = useState<ColormapType>('viridis')
|
|
const offset = useRef(0)
|
|
const scrollInterval = useRef<number | undefined>(undefined)
|
|
const state = JSON.stringify([data])
|
|
|
|
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, minY, height, colormap }
|
|
await densityFunction(data, img, options)
|
|
},
|
|
async onDrag(dx) {
|
|
offset.current += dx * size
|
|
redraw()
|
|
},
|
|
async onHover(x, y) {
|
|
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, colormap }
|
|
const density = await densityPoint(data, worldX, worldY, options)
|
|
setFocused([density.toPrecision(3), `X=${Math.floor(worldX - offset.current)} Y=${(height - minY) - worldY}`])
|
|
},
|
|
onLeave() {
|
|
setFocused([])
|
|
},
|
|
}, [version, state, seed, minY, height, colormap, project])
|
|
|
|
useEffect(() => {
|
|
if (scrollInterval.current) {
|
|
clearInterval(scrollInterval.current)
|
|
}
|
|
if (shown) {
|
|
redraw()
|
|
if (autoScroll) {
|
|
scrollInterval.current = setInterval(() => {
|
|
offset.current -= 8
|
|
redraw()
|
|
}, 100) as any
|
|
}
|
|
}
|
|
}, [version, state, seed, minY, height, colormap, project, shown, autoScroll])
|
|
|
|
return <>
|
|
<div class="controls preview-controls">
|
|
{focused.map(s => <Btn label={s} class="no-pointer" /> )}
|
|
<ColormapSelector value={colormap} onChange={setColormap} />
|
|
<BtnMenu icon="gear" tooltip={locale('terrain_settings')}>
|
|
<Btn icon={autoScroll ? 'square_fill' : 'square'} label={locale('preview.auto_scroll')} onClick={() => setAutoScroll(!autoScroll)} />
|
|
</BtnMenu>
|
|
<Btn icon="sync" tooltip={locale('generate_new_seed')}
|
|
onClick={() => setSeed(randomSeed())} />
|
|
</div>
|
|
<canvas ref={canvas} width={size} height={size}></canvas>
|
|
</>
|
|
}
|