mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 07:10:41 +00:00
89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
import type { DataModel } from '@mcschema/core'
|
|
import { useEffect, useRef, useState } from 'preact/hooks'
|
|
import { Btn } from '..'
|
|
import { useOnDrag, useOnHover } from '../../hooks'
|
|
import { biomeSource, getBiome } from '../../previews'
|
|
import { hexId } from '../../Utils'
|
|
|
|
type BiomeSourceProps = {
|
|
lang: string,
|
|
model: DataModel,
|
|
data: any,
|
|
shown: boolean,
|
|
}
|
|
export const BiomeSourcePreview = ({ data, shown }: BiomeSourceProps) => {
|
|
const [scale, setScale] = useState(2)
|
|
const [seed, setSeed] = useState(hexId())
|
|
const [focused, setFocused] = useState<string | undefined>(undefined)
|
|
const type: string = data.type?.replace(/^minecraft:/, '')
|
|
|
|
const canvas = useRef<HTMLCanvasElement>(null)
|
|
const offset = useRef<[number, number]>([0, 0])
|
|
const redrawTimeout = useRef(undefined)
|
|
const redraw = useRef<Function>()
|
|
const refocus = useRef<Function>()
|
|
|
|
useEffect(() => {
|
|
redraw.current = (res = 4) => {
|
|
if (type !== 'multi_noise') res = 1
|
|
const ctx = canvas.current.getContext('2d')!
|
|
canvas.current.width = 200 / res
|
|
canvas.current.height = 200 / res
|
|
const img = ctx.createImageData(canvas.current.width, canvas.current.height)
|
|
biomeSource(data, img, { biomeColors: {}, offset: offset.current, scale, seed, res })
|
|
ctx.putImageData(img, 0, 0)
|
|
if (res !== 1) {
|
|
clearTimeout(redrawTimeout.current)
|
|
redrawTimeout.current = setTimeout(() => redraw.current(1), 150) as any
|
|
}
|
|
}
|
|
refocus.current = (x: number, y: number) => {
|
|
const x2 = x * 200 / canvas.current.clientWidth
|
|
const y2 = y * 200 / canvas.current.clientHeight
|
|
const biome = getBiome(data, x2, y2, { biomeColors: {}, offset: offset.current, scale, seed, res: 1 })
|
|
setFocused(biome)
|
|
}
|
|
})
|
|
|
|
useOnDrag(canvas.current, (dx, dy) => {
|
|
const x = dx * 200 / canvas.current.clientWidth
|
|
const y = dy * 200 / canvas.current.clientHeight
|
|
offset.current = [offset.current[0] + x, offset.current[1] + y]
|
|
redraw.current()
|
|
})
|
|
|
|
useOnHover(canvas.current, (x, y) => {
|
|
if (x === undefined || y === undefined) {
|
|
setFocused(undefined)
|
|
} else {
|
|
refocus.current(x, y)
|
|
}
|
|
})
|
|
|
|
const state = JSON.stringify(data)
|
|
useEffect(() => {
|
|
if (shown) {
|
|
redraw.current()
|
|
}
|
|
}, [state, scale, seed, shown])
|
|
|
|
const changeScale = (newScale: number) => {
|
|
offset.current[0] *= scale / newScale
|
|
offset.current[1] *= scale / newScale
|
|
setScale(newScale)
|
|
}
|
|
|
|
return <>
|
|
<div class="controls">
|
|
{focused && <Btn label={focused} class="no-pointer" />}
|
|
{(type === 'multi_noise' || type === 'checkerboard') && <>
|
|
<Btn icon="dash" onClick={() => changeScale(scale * 1.5)} />
|
|
<Btn icon="plus" onClick={() => changeScale(scale / 1.5)} />
|
|
</>}
|
|
{type === 'multi_noise' &&
|
|
<Btn icon="sync" onClick={() => setSeed(hexId())} />}
|
|
</div>
|
|
<canvas ref={canvas} width="200" height="200"></canvas>
|
|
</>
|
|
}
|