Support 1.18 (experimental) snapshots (#158)

* Half support 1.18-experimental-snapshot-1

* Fetch 1.18 presets and improve rendering of lists

* Noise preview with deepslate

* Biome preview with deepslate

* Generalize canvas logic in one hook

* Simplify useCanvas

* Use mcschema for 1.18

* Improve noise settings preview controls

* Fix build

* Update deepslate and improve preview caching

* Cleanup, remove old preview code

* Couple seed between model and preview

* Limit output to improve performance + copy feedback
For the vanilla overworld dimension (200K lines),
it took 2+ seconds to write the output to the textarea

Now capped at 10K chars

* Add surface_relative_threshold to decorator preview

* Improve fixed list errors

src/app/components/previews/BiomeSourcePreview.tsx

@@ -1,75 +1,67 @@
-import type { DataModel } from '@mcschema/core'
+import { Path } from '@mcschema/core'
+import type { NoiseOctaves } from 'deepslate'
+import { NoiseGeneratorSettings } from 'deepslate'
 import { useEffect, useRef, useState } from 'preact/hooks'
+import type { PreviewProps } from '.'
 import { Btn } from '..'
-import { useOnDrag, useOnHover } from '../../hooks'
-import { biomeSource, getBiome } from '../../previews'
-import { hexId } from '../../Utils'
+import { useCanvas } from '../../hooks'
+import { biomeMap, getBiome } from '../../previews'
+import { newSeed } from '../../Utils'
 
-type BiomeSourceProps = {
-	lang: string,
-	model: DataModel,
-	data: any,
-	shown: boolean,
-}
-export const BiomeSourcePreview = ({ data, shown }: BiomeSourceProps) => {
+export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps) => {
 	const [scale, setScale] = useState(2)
-	const [seed, setSeed] = useState(hexId())
 	const [focused, setFocused] = useState<string | undefined>(undefined)
+	const offset = useRef<[number, number]>([0, 0])
+	const res = useRef(1)
+	const refineTimeout = useRef<number>(undefined)
+
+	const seed = BigInt(model.get(new Path(['generator', 'seed'])))
+	const octaves = getOctaves(model.get(new Path(['generator', 'settings'])))
+	const state = calculateState(data, octaves)
 	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
+	const { canvas, redraw } = useCanvas({
+		size() {
+			return [200 / res.current, 200 / res.current]
+		},
+		async draw(img) {
+			const options = { octaves, biomeColors: {}, offset: offset.current, scale, seed, res: res.current, version }
+			await biomeMap(data, img, options)
+			if (res.current === 4) {
+				clearTimeout(refineTimeout.current)
+				refineTimeout.current = setTimeout(() => {
+					res.current = 1
+					redraw()
+				}, 150)
 			}
-		}
-		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 })
+		},
+		async onDrag(dx, dy) {
+			offset.current[0] = offset.current[0] + dx * 200
+			offset.current[1] = offset.current[1] + dy * 200
+			clearTimeout(refineTimeout.current)
+			res.current = type === 'multi_noise' ? 4 : 1
+			redraw()
+		},
+		async onHover(x, y) {
+			const options = { octaves, biomeColors: {}, offset: offset.current, scale, seed, res: 1, version }
+			const biome = await getBiome(data, Math.floor(x * 200), Math.floor(y * 200), options)
 			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) {
+		},
+		onLeave() {
 			setFocused(undefined)
-		} else {
-			refocus.current(x, y)
-		}
-	})
+		},
+	}, [state, scale, seed])
 
-	const state = JSON.stringify(data)
 	useEffect(() => {
 		if (shown) {
-			redraw.current()
+			res.current = type === 'multi_noise' ? 4 : 1
+			redraw()
 		}
 	}, [state, scale, seed, shown])
 
 	const changeScale = (newScale: number) => {
-		offset.current[0] *= scale / newScale
-		offset.current[1] *= scale / newScale
+		offset.current[0] = offset.current[0] * scale / newScale
+		offset.current[1] = offset.current[1] * scale / newScale
 		setScale(newScale)
 	}
 
@@ -81,8 +73,49 @@ export const BiomeSourcePreview = ({ data, shown }: BiomeSourceProps) => {
 				<Btn icon="plus" onClick={() => changeScale(scale / 1.5)} />
 			</>}
 			{type === 'multi_noise' &&
-				<Btn icon="sync" onClick={() => setSeed(hexId())} />}
+				<Btn icon="sync" onClick={() => newSeed(model)} />}
 		</div>
 		<canvas ref={canvas} width="200" height="200"></canvas>
 	</>
 }
+
+function calculateState(data: any, octaves: NoiseOctaves) {
+	return JSON.stringify([data, octaves])
+}
+
+function getOctaves(obj: any): NoiseOctaves {
+	if (typeof obj === 'string') {
+		switch (obj.replace(/^minecraft:/, '')) {
+			case 'overworld':
+			case 'amplified':
+				return {
+					temperature: { firstOctave: -9, amplitudes: [1.5, 0, 1, 0, 0, 0] },
+					humidity: { firstOctave: -7, amplitudes: [1, 1, 0, 0, 0, 0] },
+					continentalness: { firstOctave: -9, amplitudes: [1, 1, 2, 2, 2, 1, 1, 1, 1] },
+					erosion: { firstOctave: -9, amplitudes: [1, 1, 0, 1, 1] },
+					weirdness: { firstOctave: -7, amplitudes: [1, 2, 1, 0, 0, 0] },
+					shift: { firstOctave: -3, amplitudes: [1, 1, 1, 0] },
+				}
+			case 'end':
+			case 'floating_islands':
+				return {
+					temperature: { firstOctave: 0, amplitudes: [0] },
+					humidity: { firstOctave: 0, amplitudes: [0] },
+					continentalness: { firstOctave: 0, amplitudes: [0] },
+					erosion: { firstOctave: 0, amplitudes: [0] },
+					weirdness: { firstOctave: 0, amplitudes: [0] },
+					shift: { firstOctave: 0, amplitudes: [0] },
+				}
+			default:
+				return {
+					temperature: { firstOctave: -7, amplitudes: [1, 1] },
+					humidity: { firstOctave: -7, amplitudes: [1, 1] },
+					continentalness: { firstOctave: -7, amplitudes: [1, 1] },
+					erosion: { firstOctave: -7, amplitudes: [1, 1] },
+					weirdness: { firstOctave: -7, amplitudes: [1, 1] },
+					shift: { firstOctave: 0, amplitudes: [0] },
+				}
+		}
+	}
+	return NoiseGeneratorSettings.fromJson(obj).octaves
+}

src/app/components/previews/DecoratorPreview.tsx

@@ -1,39 +1,27 @@
-import type { DataModel } from '@mcschema/core'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useEffect, useState } from 'preact/hooks'
+import type { PreviewProps } from '.'
 import { Btn } from '..'
+import { useCanvas } from '../../hooks'
 import { decorator } from '../../previews'
-import type { VersionId } from '../../Schemas'
-import { hexId } from '../../Utils'
+import { randomSeed } from '../../Utils'
 
-type DecoratorProps = {
-	lang: string,
-	model: DataModel,
-	data: any,
-	version: VersionId,
-	shown: boolean,
-}
-export const DecoratorPreview = ({ data, version, shown }: DecoratorProps) => {
+export const DecoratorPreview = ({ data, version, shown }: PreviewProps) => {
 	const [scale, setScale] = useState(4)
-	const [seed, setSeed] = useState(hexId())
+	const [seed, setSeed] = useState(randomSeed())
 
-	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)
+	const { canvas, redraw } = useCanvas({
+		size() {
+			return [scale * 16, scale * 16]
+		},
+		async draw(img) {
 			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())
+			redraw()
 		}
 	}, [state, scale, seed, shown])
 
@@ -41,7 +29,7 @@ export const DecoratorPreview = ({ data, version, shown }: DecoratorProps) => {
 		<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())} />
+			<Btn icon="sync" onClick={() => setSeed(randomSeed())} />
 		</div>
 		<canvas ref={canvas} width="64" height="64"></canvas>
 	</>

src/app/components/previews/NoiseSettingsPreview.tsx

@@ -1,60 +1,71 @@
-import type { DataModel } from '@mcschema/core'
 import { useEffect, useRef, useState } from 'preact/hooks'
+import type { PreviewProps } from '.'
 import { Btn, BtnInput, BtnMenu } from '..'
-import { useOnDrag } from '../../hooks'
+import { useCanvas } from '../../hooks'
 import { locale } from '../../Locales'
 import { noiseSettings } from '../../previews'
-import { hexId } from '../../Utils'
+import { checkVersion } from '../../Schemas'
+import { randomSeed } from '../../Utils'
 
-type NoiseSettingsProps = {
-	lang: string,
-	model: DataModel,
-	data: any,
-	shown: boolean,
-}
-export const NoiseSettingsPreview = ({ lang, data, shown }: NoiseSettingsProps) => {
+export const NoiseSettingsPreview = ({ lang, data, shown, version }: PreviewProps) => {
 	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>()
+	const [seed, setSeed] = useState(randomSeed())
+	const [biomeFactor, setBiomeFactor] = useState(0.2)
+	const [biomeOffset, setBiomeOffset] = useState(0.1)
+	const [biomePeaks, setBiomePeaks] = useState(0)
+	const [focused, setFocused] = useState<string | undefined>(undefined)
+	const offset = useRef(0)
+	const state = JSON.stringify([data, biomeFactor, biomeOffset, biomePeaks])
 
+	const hasPeaks = checkVersion(version, '1.18')
 	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)
-		}
-	})
+		setBiomeFactor(hasPeaks ? 600 : 0.2)
+		setBiomeOffset(hasPeaks ? 0.05 : 0.1)
+	}, [hasPeaks])
 
-	useOnDrag(canvas.current, (dx) => {
-		const x = dx * canvas.current.width / canvas.current.clientWidth
-		offset.current = offset.current + x
-		redraw.current()
-	})
+	const size = data?.noise?.height ?? 256
+	const { canvas, redraw } = useCanvas({
+		size() {
+			return [size, size]
+		},
+		async draw(img) {
+			const options = { biomeOffset, biomeFactor, biomePeaks, offset: offset.current, width: img.width, seed, version }
+			noiseSettings(data, img, options)
+		},
+		async onDrag(dx) {
+			offset.current += dx * size
+			redraw()
+		},
+		async onHover(_, y) {
+			const worldY = size - Math.max(1, Math.ceil(y * size)) + (data?.noise?.min_y ?? 0)
+			setFocused(`${worldY}`)
+		},
+		onLeave() {
+			setFocused(undefined)
+		},
+	}, [state, seed])
 
-	const state = JSON.stringify(data)
 	useEffect(() => {
 		if (shown) {
-			redraw.current()
+			redraw()
 		}
-	}, [state, biomeDepth, biomeScale, seed, shown])
+	}, [state, seed, shown])
 
 	return <>
 		<div class="controls">
+			{focused && <Btn label={`Y = ${focused}`} class="no-pointer" />}
 			<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))} />
+				{hasPeaks ? <>
+					<BtnInput label={loc('preview.factor')} value={`${biomeFactor}`} onChange={v => setBiomeFactor(Number(v))} />
+					<BtnInput label={loc('preview.offset')} value={`${biomeOffset}`} onChange={v => setBiomeOffset(Number(v))} />
+					<BtnInput label={loc('preview.peaks')} value={`${biomePeaks}`} onChange={v => setBiomePeaks(Number(v))} />
+				</> : <>
+					<BtnInput label={loc('preview.scale')} value={`${biomeFactor}`} onChange={v => setBiomeFactor(Number(v))} />
+					<BtnInput label={loc('preview.depth')} value={`${biomeOffset}`} onChange={v => setBiomeOffset(Number(v))} />
+				</>}
 			</BtnMenu>
-			<Btn icon="sync" onClick={() => setSeed(hexId())} />
+			<Btn icon="sync" onClick={() => setSeed(randomSeed())} />
 		</div>
-		<canvas ref={canvas} width="200" height={data.height}></canvas>
+		<canvas ref={canvas} width={size} height={size}></canvas>
 	</>
 }

src/app/components/previews/index.ts

@@ -1,3 +1,14 @@
+import type { DataModel } from '@mcschema/core'
+import type { VersionId } from '../../Schemas'
+
 export * from './BiomeSourcePreview'
 export * from './DecoratorPreview'
 export * from './NoiseSettingsPreview'
+
+export type PreviewProps = {
+	lang: string,
+	model: DataModel,
+	data: any,
+	shown: boolean,
+	version: VersionId,
+}