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/BtnInput.tsx

@@ -5,17 +5,14 @@ type BtnInputProps = {
 	icon?: keyof typeof Octicon,
 	label?: string,
 	large?: boolean,
-	type?: 'number' | 'text',
 	doSelect?: number,
 	value?: string,
 	onChange?: (value: string) => unknown,
 }
-export function BtnInput({ icon, label, large, type, doSelect, value, onChange }: BtnInputProps) {
+export function BtnInput({ icon, label, large, doSelect, value, onChange }: BtnInputProps) {
 	const onInput = onChange === undefined ? () => {} : (e: any) => {
 		const value = (e.target as HTMLInputElement).value
-		if (type !== 'number' || (!value.endsWith('.') && !isNaN(Number(value)))) {
-			onChange?.(value)
-		}
+		onChange?.(value)
 	}
 
 	const ref = useRef<HTMLInputElement>(null)
@@ -28,6 +25,6 @@ export function BtnInput({ icon, label, large, type, doSelect, value, onChange }
 	return <div class={`btn btn-input ${large ? 'large-input' : ''}`} onClick={e => e.stopPropagation()}>
 		{icon && Octicon[icon]}
 		{label && <span>{label}</span>}
-		<input ref={ref} type="text" value={value} onInput={onInput} />
+		<input ref={ref} type="text" value={value} onChange={onInput} />
 	</div>
 }

src/app/components/Octicon.tsx

@@ -2,6 +2,7 @@ export const Octicon = {
 	archive: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5a.25.25 0 00-.25.25v1.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-1.5a.25.25 0 00-.25-.25H1.75zM0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v1.5A1.75 1.75 0 0114.25 6H1.75A1.75 1.75 0 010 4.25v-1.5zM1.75 7a.75.75 0 01.75.75v5.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25v-5.5a.75.75 0 111.5 0v5.5A1.75 1.75 0 0113.25 15H2.75A1.75 1.75 0 011 13.25v-5.5A.75.75 0 011.75 7zm4.5 1a.75.75 0 000 1.5h3.5a.75.75 0 100-1.5h-3.5z"></path></svg>,
 	arrow_left: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z"></path></svg>,
 	arrow_right: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"></path></svg>,
+	check: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>,
 	chevron_down: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path></svg>,
 	chevron_right: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"></path></svg>,
 	chevron_up: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.22 9.78a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L8 6.06 4.28 9.78a.75.75 0 01-1.06 0z"></path></svg>,

src/app/components/PreviewPanel.tsx

@@ -28,7 +28,7 @@ export function PreviewPanel({ lang, model, version, id, shown }: PreviewPanelPr
 	}
 
 	if (id === 'worldgen/noise_settings' && model) {
-		const data = model.get(new Path(['noise']))
+		const data = model.get(new Path([]))
 		if (data) return <NoiseSettingsPreview {...{ lang, model, version, shown, data }} />
 	}
 

src/app/components/SourcePanel.tsx

@@ -1,6 +1,6 @@
 import type { DataModel } from '@mcschema/core'
 import { ModelPath } from '@mcschema/core'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Btn, BtnMenu } from '.'
 import { useModel } from '../hooks'
 import { locale } from '../Locales'
@@ -9,6 +9,8 @@ import type { BlockStateRegistry } from '../Schemas'
 import { Store } from '../Store'
 import { message } from '../Utils'
 
+const OUTPUT_CHARS_LIMIT = 10000
+
 const INDENT: Record<string, number | string> = {
 	'2_spaces': 2,
 	'4_spaces': 4,
@@ -23,22 +25,31 @@ type SourcePanelProps = {
 	doCopy?: number,
 	doDownload?: number,
 	doImport?: number,
+	copySuccess: () => unknown,
 	onError: (message: string) => unknown,
 }
-export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload, doImport, onError }: SourcePanelProps) {
+export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload, doImport, copySuccess, onError }: SourcePanelProps) {
 	const loc = locale.bind(null, lang)
 	const [indent, setIndent] = useState(Store.getIndent())
 	const source = useRef<HTMLTextAreaElement>(null)
 	const download = useRef<HTMLAnchorElement>(null)
 	const retransform = useRef<Function>()
 
+	const getOutput = useCallback((model: DataModel, blockStates: BlockStateRegistry) => {
+		const data = model.schema.hook(transformOutput, new ModelPath(model), model.data, { blockStates })
+		return JSON.stringify(data, null, INDENT[indent]) + '\n'
+	}, [])
+
 	useEffect(() => {
 		retransform.current = () => {
 			if (!model || !blockStates) return
 			try {
-				const props = { blockStates: blockStates ?? {} }
-				const data = model.schema.hook(transformOutput, new ModelPath(model), model.data, props)
-				source.current.value = JSON.stringify(data, null, INDENT[indent]) + '\n'
+				const output = getOutput(model, blockStates)
+				if (output.length >= OUTPUT_CHARS_LIMIT) {
+					source.current.value = output.slice(0, OUTPUT_CHARS_LIMIT) + `\n\nOutput is too large to display (+${OUTPUT_CHARS_LIMIT} chars)\nExport to view complete output\n\n`
+				} else {
+					source.current.value = output
+				}
 			} catch (e) {
 				onError(`Error getting JSON output: ${message(e)}`)
 				console.error(e)
@@ -68,9 +79,10 @@ export function SourcePanel({ lang, name, model, blockStates, doCopy, doDownload
 	}
 
 	useEffect(() => {
-		if (doCopy && source.current) {
-			source.current.select()
-			document.execCommand('copy')
+		if (doCopy && model && blockStates) {
+			navigator.clipboard.writeText(getOutput(model, blockStates)).then(() => {
+				copySuccess()
+			})
 		}
 	}, [doCopy])
 

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,
+}