Add noise visualizations to biome map

src/app/components/Octicon.tsx

@@ -28,6 +28,7 @@ export const Octicon = {
 	plus: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 2a.75.75 0 01.75.75v4.5h4.5a.75.75 0 010 1.5h-4.5v4.5a.75.75 0 01-1.5 0v-4.5h-4.5a.75.75 0 010-1.5h4.5v-4.5A.75.75 0 018 2z"></path></svg>,
 	plus_circle: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path></svg>,
 	search: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>,
+	stack: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.122.392a1.75 1.75 0 011.756 0l5.003 2.902c.83.481.83 1.68 0 2.162L8.878 8.358a1.75 1.75 0 01-1.756 0L2.119 5.456a1.25 1.25 0 010-2.162L7.122.392zM8.125 1.69a.25.25 0 00-.25 0l-4.63 2.685 4.63 2.685a.25.25 0 00.25 0l4.63-2.685-4.63-2.685zM1.601 7.789a.75.75 0 011.025-.273l5.249 3.044a.25.25 0 00.25 0l5.249-3.044a.75.75 0 01.752 1.298l-5.248 3.044a1.75 1.75 0 01-1.756 0L1.874 8.814A.75.75 0 011.6 7.789zm0 3.5a.75.75 0 011.025-.273l5.249 3.044a.25.25 0 00.25 0l5.249-3.044a.75.75 0 01.752 1.298l-5.248 3.044a1.75 1.75 0 01-1.756 0l-5.248-3.044a.75.75 0 01-.273-1.025z"></path></svg>,
 	sun: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 10.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zM2.343 2.343a.75.75 0 011.061 0l1.06 1.061a.75.75 0 01-1.06 1.06l-1.06-1.06a.75.75 0 010-1.06zm9.193 9.193a.75.75 0 011.06 0l1.061 1.06a.75.75 0 01-1.06 1.061l-1.061-1.06a.75.75 0 010-1.061zM16 8a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0116 8zM3 8a.75.75 0 01-.75.75H.75a.75.75 0 010-1.5h1.5A.75.75 0 013 8zm10.657-5.657a.75.75 0 010 1.061l-1.061 1.06a.75.75 0 11-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zm-9.193 9.193a.75.75 0 010 1.06l-1.06 1.061a.75.75 0 11-1.061-1.06l1.06-1.061a.75.75 0 011.061 0z"></path></svg>,
 	sync: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0114.95 7.16a.75.75 0 11-1.49.178A5.501 5.501 0 008 2.5zM1.705 8.005a.75.75 0 01.834.656 5.501 5.501 0 009.592 2.97l-1.204-1.204a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011.05 8.84a.75.75 0 01.656-.834z"></path></svg>,
 	tag: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>,

src/app/components/previews/BiomeSourcePreview.tsx

@@ -3,15 +3,18 @@ import type { NoiseOctaves } from 'deepslate'
 import { NoiseGeneratorSettings } from 'deepslate'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import type { PreviewProps } from '.'
-import { Btn } from '..'
+import { Btn, BtnMenu } from '..'
 import { useCanvas } from '../../hooks'
 import { locale } from '../../Locales'
 import { biomeMap, getBiome } from '../../previews'
 import { newSeed } from '../../Utils'
 
+const LAYERS = ['biomes', 'temperature', 'humidity', 'continentalness', 'erosion', 'weirdness', 'offset', 'factor', 'jaggedness'] as const
+
 export const BiomeSourcePreview = ({ model, data, shown, lang, version }: PreviewProps) => {
 	const [scale, setScale] = useState(2)
 	const [focused, setFocused] = useState<string | undefined>(undefined)
+	const [layers, setLayers] = useState(new Set<typeof LAYERS[number]>(['biomes']))
 	const offset = useRef<[number, number]>([0, 0])
 	const res = useRef(1)
 	const refineTimeout = useRef<number>(undefined)
@@ -26,7 +29,7 @@ export const BiomeSourcePreview = ({ model, data, shown, lang, version }: Previe
 			return [200 / res.current, 200 / res.current]
 		},
 		async draw(img) {
-			const options = { octaves, biomeColors: {}, offset: offset.current, scale, seed, res: res.current, version }
+			const options = { octaves, biomeColors: {}, layers, offset: offset.current, scale, seed, res: res.current, version }
 			await biomeMap(data, img, options)
 			if (res.current === 4) {
 				clearTimeout(refineTimeout.current)
@@ -44,21 +47,21 @@ export const BiomeSourcePreview = ({ model, data, shown, lang, version }: Previe
 			redraw()
 		},
 		async onHover(x, y) {
-			const options = { octaves, biomeColors: {}, offset: offset.current, scale, seed, res: 1, version }
+			const options = { octaves, biomeColors: {}, layers, offset: offset.current, scale, seed, res: 1, version }
 			const biome = await getBiome(data, Math.floor(x * 200), Math.floor(y * 200), options)
 			setFocused(biome)
 		},
 		onLeave() {
 			setFocused(undefined)
 		},
-	}, [state, scale, seed])
+	}, [state, scale, seed, layers])
 
 	useEffect(() => {
 		if (shown) {
 			res.current = type === 'multi_noise' ? 4 : 1
 			redraw()
 		}
-	}, [state, scale, seed, shown])
+	}, [state, scale, seed, layers, shown])
 
 	const changeScale = (newScale: number) => {
 		offset.current[0] = offset.current[0] * scale / newScale
@@ -69,6 +72,19 @@ export const BiomeSourcePreview = ({ model, data, shown, lang, version }: Previe
 	return <>
 		<div class="controls">
 			{focused && <Btn label={focused} class="no-pointer" />}
+			{type === 'multi_noise' &&
+				<BtnMenu icon="stack" tooltip={locale(lang, 'configure_layers')}>
+					{LAYERS.map(name => {
+						const enabled = layers.has(name)
+						return <Btn label={locale(lang, `layer.${name}`)} 
+							active={enabled}
+							tooltip={enabled ? locale(lang, 'enabled') : locale(lang, 'disabled')}
+							onClick={(e) => {
+								setLayers(new Set([name]))
+								e.stopPropagation()
+							}} />
+					})}
+				</BtnMenu>}
 			{(type === 'multi_noise' || type === 'checkerboard') && <>
 				<Btn icon="dash" tooltip={locale(lang, 'zoom_out')}
 					onClick={() => changeScale(scale * 1.5)} />
@@ -88,38 +104,40 @@ function calculateState(data: any, octaves: NoiseOctaves) {
 }
 
 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] },
-				}
-		}
+	if (typeof obj !== 'string') {
+		const settings = NoiseGeneratorSettings.fromJson(obj)
+		obj = settings.noise.densityFactor === 0 && settings.noise.densityOffset === -0.030078125
+			? 'minecraft:nether' : 'minecraft:overworld'
+	}
+	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
 }