Fix #196 Reimplement placed feature preview

src/app/components/generator/PreviewPanel.tsx

@@ -3,9 +3,10 @@ import { Path } from '@mcschema/core'
 import { useState } from 'preact/hooks'
 import { useModel } from '../../hooks'
 import type { VersionId } from '../../services'
+import { checkVersion } from '../../services'
 import { BiomeSourcePreview, DecoratorPreview, NoisePreview, NoiseSettingsPreview } from '../previews'
 
-export const HasPreview = ['dimension', 'worldgen/noise', 'worldgen/noise_settings', 'worldgen/configured_feature']
+export const HasPreview = ['dimension', 'worldgen/noise', 'worldgen/noise_settings', 'worldgen/configured_feature', 'worldgen/placed_feature']
 
 type PreviewPanelProps = {
 	model: DataModel | null,
@@ -21,22 +22,24 @@ export function PreviewPanel({ model, version, id, shown }: PreviewPanelProps) {
 		setCount(count => count + 1)
 	})
 
-	if (id === 'dimension' && model?.get(new Path(['generator', 'type']))?.endsWith('noise')) {
+	if (!model) return <></>
+
+	if (id === 'dimension' && model.get(new Path(['generator', 'type']))?.endsWith('noise')) {
 		const data = model.get(new Path(['generator', 'biome_source']))
 		if (data) return <BiomeSourcePreview {...{ model, version, shown, data }} />
 	}
 
-	if (id === 'worldgen/noise' && model) {
+	if (id === 'worldgen/noise') {
 		const data = model.get(new Path([]))
 		if (data) return <NoisePreview {...{ model, version, shown, data }} />
 	}
 
-	if (id === 'worldgen/noise_settings' && model) {
+	if (id === 'worldgen/noise_settings') {
 		const data = model.get(new Path([]))
 		if (data) return <NoiseSettingsPreview {...{ model, version, shown, data }} />
 	}
 
-	if (id === 'worldgen/configured_feature' && model) {
+	if ((id === 'worldgen/placed_feature' ||  (id === 'worldgen/configured_feature' && checkVersion(version, '1.16', '1.17')))) {
 		const data = model.get(new Path([]))
 		if (data) return <DecoratorPreview {...{ model, version, shown, data }} />
 	}

src/app/components/previews/BiomeSourcePreview.tsx

@@ -74,7 +74,7 @@ export const BiomeSourcePreview = ({ model, data, shown, version }: PreviewProps
 	}
 
 	return <>
-		<div class="controls">
+		<div class="controls preview-controls">
 			{focused && <Btn label={focused} class="no-pointer" />}
 			{type === 'multi_noise' &&
 				<BtnMenu icon="stack" tooltip={locale('configure_layers')}>

src/app/components/previews/DecoratorPreview.tsx

@@ -28,7 +28,7 @@ export const DecoratorPreview = ({ data, version, shown }: PreviewProps) => {
 	}, [state, scale, seed, shown])
 
 	return <>
-		<div class="controls">
+		<div class="controls preview-controls">
 			<Btn icon="dash" tooltip={locale('zoom_out')}
 				onClick={() => setScale(Math.min(16, scale + 1))} />
 			<Btn icon="plus" tooltip={locale('zoom_in')}

src/app/components/previews/NoisePreview.tsx

@@ -41,7 +41,7 @@ export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
 	}
 
 	return <>
-		<div class="controls">
+		<div class="controls preview-controls">
 			<Btn icon="dash" tooltip={locale('zoom_out')}
 				onClick={() => changeScale(scale * 1.5)} />
 			<Btn icon="plus" tooltip={locale('zoom_in')}

src/app/components/previews/NoiseSettingsPreview.tsx

@@ -45,7 +45,7 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
 	}, [state, seed, shown])
 
 	return <>
-		<div class="controls">
+		<div class="controls preview-controls">
 			{focused && <Btn label={`Y = ${focused}`} class="no-pointer" />}
 			{checkVersion(version, undefined, '1.17') &&
 				<BtnMenu icon="gear" tooltip={locale('terrain_settings')}>

src/app/pages/Generator.tsx

@@ -227,7 +227,7 @@ export function Generator({}: Props) {
 	const [copyActive, copySuccess] = useActiveTimeout()
 
 	const [previewShown, setPreviewShown] = useState(false)
-	const hasPreview = HasPreview.includes(gen.id)
+	const hasPreview = HasPreview.includes(gen.id) && !(gen.id === 'worldgen/configured_feature' && checkVersion(version, '1.18'))
 	if (previewShown && !hasPreview) setPreviewShown(false)
 	let actionsShown = 1
 	if (hasPreview) actionsShown += 1

src/app/previews/Decorator.ts

@@ -2,7 +2,8 @@ import { DataModel } from '@mcschema/core'
 import type { Random } from 'deepslate'
 import { LegacyRandom, PerlinNoise } from 'deepslate'
 import type { VersionId } from '../services'
-import { clamp, stringToColor } from '../Utils'
+import { checkVersion } from '../services'
+import { clamp, isObject, stringToColor } from '../Utils'
 
 type BlockPos = [number, number, number]
 type Placement = [BlockPos, number]
@@ -51,7 +52,11 @@ export function decorator(state: any, img: ImageData, options: DecoratorOptions)
 
 	for (let x = 0; x < options.size[0] / 16; x += 1) {
 		for (let z = 0; z < options.size[2] / 16; z += 1) {
-			getPlacements([x * 16, 0, z * 16], DataModel.unwrapLists(state), ctx)
+			if (checkVersion(options.version, undefined, '1.17')) {
+				getPlacements([x * 16, 0, z * 16], DataModel.unwrapLists(state), ctx)
+			} else {
+				modifyPlacement([x * 16, 0, z * 16], DataModel.unwrapLists(state.placement), ctx)
+			}
 		}
 	}
 
@@ -103,6 +108,56 @@ function sampleInt(value: any, ctx: PlacementContext): number {
 	}
 }
 
+function resolveAnchor(anchor: any, _ctx: PlacementContext): number {
+	if (!isObject(anchor)) throw new Error('Invalid vertical anchor')
+	if (anchor.absolute) return anchor.absolute
+	if (anchor.above_bottom) return anchor.above_bottom
+	if (anchor.below_top) return 256 - anchor.below_top
+	throw new Error('Invalid vertical anchor')
+}
+
+function sampleHeight(height: any, ctx: PlacementContext): number {
+	if (!isObject(height)) throw new Error('Invalid height provider')
+	if (typeof height.type !== 'string') {
+		return resolveAnchor(height, ctx)
+	}
+	switch (normalize(height.type)) {
+		case 'constant': return resolveAnchor(height.value, ctx)
+		case 'uniform': {
+			const min = resolveAnchor(height.min_inclusive, ctx)
+			const max = resolveAnchor(height.max_inclusive, ctx)
+			return min + ctx.nextInt(max - min + 1)
+		}
+		case 'biased_to_bottom': {
+			const min = resolveAnchor(height.min_inclusive, ctx)
+			const max = resolveAnchor(height.max_inclusive, ctx)
+			const n = ctx.nextInt(max - min - (height.inner ?? 1) + 1)
+			return min + ctx.nextInt(n + (height.inner ?? 1))
+		}
+		case 'very_biased_to_bottom': {
+			const min = resolveAnchor(height.min_inclusive, ctx)
+			const max = resolveAnchor(height.max_inclusive, ctx)
+			const inner = height.inner ?? 1
+			const n1 = min + inner + ctx.nextInt(max - min - inner + 1)
+			const n2 = min + ctx.nextInt(n1 - min)
+			return min + ctx.nextInt(n2 - min + inner)
+		}
+		case 'trapezoid': {
+			const min = resolveAnchor(height.min_inclusive, ctx)
+			const max = resolveAnchor(height.max_inclusive, ctx)
+			const plateau = height.plateau ?? 0
+			if (plateau >= max - min) {
+				return min + ctx.nextInt(max - min + 1)
+			}
+			const n1 = (max - min - plateau) / 2
+			const n2 = (max - min) - n1
+			return min + ctx.nextInt(n2 + 1) + ctx.nextInt(n1 + 1)
+		}
+		default: throw new Error(`Invalid height provider ${height.type}`)
+	}
+}
+
+// 1.17 and before
 function useFeature(s: string, ctx: PlacementContext) {
 	const i = ctx.features.indexOf(s)
 	if (i != -1) return i
@@ -316,3 +371,72 @@ const Decorators: {
 		return []
 	},
 }
+
+// 1.18 and after
+function modifyPlacement(pos: BlockPos, placement: any[], ctx: PlacementContext) {
+	let positions = [pos]
+	for (const modifier of placement) {
+		const modifierFn = PlacementModifiers[normalize(modifier?.type ?? 'nope')]
+		if (!modifierFn) continue
+		positions = positions.flatMap(pos =>
+			PlacementModifiers[normalize(modifier.type)](modifier, pos, ctx)
+		)
+	}
+	for (const pos of positions) {
+		ctx.placements.push([pos, 0])
+	}
+}
+
+const PlacementModifiers: {
+	[key: string]: (config: any, pos: BlockPos, ctx: PlacementContext) => BlockPos[],
+} = {
+	count: ({ count }, pos, ctx) => {
+		return new Array(ctx.sampleInt(count ?? 1)).fill(pos)
+	},
+	count_on_every_layer: ({ count }, pos, ctx) => {
+		return new Array(ctx.sampleInt(count ?? 1)).fill(pos)
+			.map(p => [
+				p[0] + ctx.nextInt(16),
+				p[1], 
+				p[2] + ctx.nextInt(16),
+			])
+	},
+	environment_scan: ({}, pos) => {
+		return [pos]
+	},
+	height_range: ({ height }, pos, ctx) => {
+		return decorateY(pos, sampleHeight(height, ctx))
+	},
+	heightmap: ({}, pos, ctx) => {
+		const y = Math.max(ctx.seaLevel, terrain[clamp(0, 63, pos[0])])
+		return decorateY(pos, y)
+	},
+	in_square: ({}, pos, ctx) => {
+		return [[
+			pos[0] + ctx.nextInt(16),
+			pos[1],
+			pos[2] + ctx.nextInt(16),
+		]]
+	},
+	noise_based_count: ({ noise_to_count_ratio, noise_factor, noise_offset }, pos, ctx) => {
+		const factor = Math.max(1, noise_factor)
+		const noise = ctx.biomeInfoNoise.sample(pos[0] / factor, 0, pos[2] / factor)
+		const count = Math.max(0, Math.ceil((noise + (noise_offset ?? 0)) * noise_to_count_ratio))
+		return new Array(count).fill(pos)
+	},
+	noise_threshold_count: ({ noise_level, below_noise, above_noise }, pos, ctx) => {
+		const noise = ctx.biomeInfoNoise.sample(pos[0] / 200, 0, pos[2] / 200)
+		const count = noise < noise_level ? below_noise : above_noise
+		return new Array(count).fill(pos)
+	},
+	random_offset: ({ xz_spread, y_spread }, pos, ctx) => {
+		return [[
+			pos[0] + sampleInt(xz_spread, ctx),
+			pos[1] + sampleInt(y_spread, ctx),
+			pos[2] + sampleInt(xz_spread, ctx),
+		]]
+	},
+	rarity_filter: ({ chance }, pos, ctx) => {
+		return ctx.nextFloat() < 1 / (chance ?? 1) ? [pos] : []
+	},
+}

src/styles/global.css

@@ -255,6 +255,7 @@ main > .controls {
 	z-index: 1;
 }
 
+.preview-controls > *:not(:last-child),
 .generator-controls > *:not(:last-child) {
 	margin-right: 8px;
 }