Switch to vite and preact

src/app/components/previews/BiomeSourcePreview.tsx

@@ -0,0 +1,88 @@
+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 * canvas.current.width / canvas.current.clientWidth
+		const y = dy * canvas.current.height / 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>
+	</>
+}

src/app/components/previews/DecoratorPreview.tsx

@@ -0,0 +1,48 @@
+import type { DataModel } from '@mcschema/core'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Btn } from '..'
+import { decorator } from '../../previews'
+import type { VersionId } from '../../Schemas'
+import { hexId } from '../../Utils'
+
+type DecoratorProps = {
+	lang: string,
+	model: DataModel,
+	data: any,
+	version: VersionId,
+	shown: boolean,
+}
+export const DecoratorPreview = ({ data, version, shown }: DecoratorProps) => {
+	const [scale, setScale] = useState(4)
+	const [seed, setSeed] = useState(hexId())
+
+	const canvas = useRef<HTMLCanvasElement>(null)
+	const redraw = useRef<Function>()
+
+	useEffect(() => {
+		redraw.current = () => {
+			const ctx = canvas.current.getContext('2d')!
+			canvas.current.width = scale * 16
+			canvas.current.height = scale * 16
+			const img = ctx.createImageData(canvas.current.width, canvas.current.height)
+			decorator(data, img, { seed, version, size: [scale * 16, 128, scale * 16] })
+			ctx.putImageData(img, 0, 0)
+		}
+	})
+
+	const state = JSON.stringify(data)
+	useEffect(() => {
+		if (shown) {
+			setTimeout(() => redraw.current())
+		}
+	}, [state, scale, seed, shown])
+
+	return <>
+		<div class="controls">
+			<Btn icon="dash" onClick={() => setScale(Math.min(16, scale + 1))} />
+			<Btn icon="plus" onClick={() => setScale(Math.max(1, scale - 1))} />
+			<Btn icon="sync" onClick={() => setSeed(hexId())} />
+		</div>
+		<canvas ref={canvas} width="64" height="64"></canvas>
+	</>
+}

src/app/components/previews/NoiseSettingsPreview.tsx

@@ -0,0 +1,60 @@
+import type { DataModel } from '@mcschema/core'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { Btn, BtnInput, BtnMenu } from '..'
+import { useOnDrag } from '../../hooks'
+import { locale } from '../../Locales'
+import { noiseSettings } from '../../previews'
+import { hexId } from '../../Utils'
+
+type NoiseSettingsProps = {
+	lang: string,
+	model: DataModel,
+	data: any,
+	shown: boolean,
+}
+export const NoiseSettingsPreview = ({ lang, data, shown }: NoiseSettingsProps) => {
+	const loc = locale.bind(null, lang)
+	const [seed, setSeed] = useState(hexId())
+	const [biomeDepth, setBiomeDepth] = useState(0.1)
+	const [biomeScale, setBiomeScale] = useState(0.2)
+
+	const canvas = useRef<HTMLCanvasElement>(null)
+	const offset = useRef<number>(0)
+	const redraw = useRef<Function>()
+
+	useEffect(() => {
+		redraw.current = () => {
+			const ctx = canvas.current.getContext('2d')!
+			const size = data.height
+			canvas.current.width = size
+			canvas.current.height = size
+			const img = ctx.createImageData(canvas.current.width, canvas.current.height)
+			noiseSettings(data, img, { biomeDepth, biomeScale, offset: offset.current, width: size, seed })
+			ctx.putImageData(img, 0, 0)
+		}
+	})
+
+	useOnDrag(canvas.current, (dx) => {
+		const x = dx * canvas.current.width / canvas.current.clientWidth
+		offset.current = offset.current + x
+		redraw.current()
+	})
+
+	const state = JSON.stringify(data)
+	useEffect(() => {
+		if (shown) {
+			redraw.current()
+		}
+	}, [state, biomeDepth, biomeScale, seed, shown])
+
+	return <>
+		<div class="controls">
+			<BtnMenu icon="gear">
+				<BtnInput type="number" label={loc('preview.depth')} value={`${biomeDepth}`} onChange={v => setBiomeDepth(Number(v))} />
+				<BtnInput type="number" label={loc('preview.scale')} value={`${biomeScale}`} onChange={v => setBiomeScale(Number(v))} />
+			</BtnMenu>
+			<Btn icon="sync" onClick={() => setSeed(hexId())} />
+		</div>
+		<canvas ref={canvas} width="200" height={data.height}></canvas>
+	</>
+}

src/app/components/previews/index.ts

@@ -0,0 +1,3 @@
+export * from './BiomeSourcePreview'
+export * from './DecoratorPreview'
+export * from './NoiseSettingsPreview'