Fix #418 noise settings preview freezes

src/app/components/ErrorPanel.tsx

@@ -9,18 +9,20 @@ import { Octicon } from './index.js'
 
 type ErrorPanelProps = {
 	error: string | Error,
+	prefix?: string,
 	reportable?: boolean,
 	onDismiss?: () => unknown,
 	body?: string,
 	children?: ComponentChildren,
 }
-export function ErrorPanel({ error, reportable, onDismiss, body: body_, children }: ErrorPanelProps) {
+export function ErrorPanel({ error, prefix, reportable, onDismiss, body: body_, children }: ErrorPanelProps) {
 	const { version } = useVersion()
 	const [stackVisible, setStackVisible] = useState(false)
 	const [stack, setStack] = useState<string | undefined>(undefined)
 
 	const gen = getGenerator(getCurrentUrl())
 	const source = gen ? Store.getBackup(gen.id) : undefined
+	const name = (prefix ?? '') + (error instanceof Error ? error.message : error)
 
 	useEffect(() => {
 		if (error instanceof Error) {
@@ -41,7 +43,8 @@ export function ErrorPanel({ error, reportable, onDismiss, body: body_, children
 
 	const url = useMemo(() => {
 		let url ='https://github.com/misode/misode.github.io/issues/new'
-		url += `?title=${encodeURIComponent(error instanceof Error ? `${error.name}: ${error.message}` : error.toString())}`
+		const fullName = (error instanceof Error ? `${error.name}: ` : '') + name
+		url += `?title=${encodeURIComponent(fullName)}`
 		let body = ''
 		body += `## Crash report\n * Page url: \`${location.href}\`\n`
 		if (gen) {
@@ -50,7 +53,7 @@ export function ErrorPanel({ error, reportable, onDismiss, body: body_, children
 		body += ` * Current version: \`${version}\`\n`
 		body += ` * Latest version: \`${latestVersion}\`\n`
 		if (error instanceof Error && stack) {
-			body += `\n### Stack trace\n\`\`\`\n${error.name}: ${error.message}\n${stack}\n\`\`\`\n`
+			body += `\n### Stack trace\n\`\`\`\n${fullName}\n${stack}\n\`\`\`\n`
 		}
 		if (source) {
 			body += `\n### Generator JSON\n<details>\n<pre>\n${JSON.stringify(source, null, 2)}\n</pre>\n</details>\n`
@@ -60,12 +63,12 @@ export function ErrorPanel({ error, reportable, onDismiss, body: body_, children
 		}
 		url += `&body=${encodeURIComponent(body)}`
 		return url
-	}, [error, body_, version, stack, source, gen?.id])
+	}, [error, name, body_, version, stack, source, gen?.id])
 
 	return <div class="error">
 		{onDismiss && <div class="error-dismiss" onClick={onDismiss}>{Octicon.x}</div>}
 		<h3>
-			{error instanceof Error ? error.message : error}
+			{(prefix ?? '') + (error instanceof Error ? error.message : error)}
 			{stack && <span onClick={() => setStackVisible(!stackVisible)}>
 				{Octicon.info}
 			</span>}

src/app/components/previews/Deepslate.ts

@@ -1,7 +1,7 @@
 import * as deepslate19 from 'deepslate/worldgen'
+import { clamp, computeIfAbsent, computeIfAbsentAsync, deepClone, deepEqual, isObject, square } from '../../Utils.js'
 import type { VersionId } from '../../services/index.js'
 import { checkVersion, fetchAllPresets, fetchPreset } from '../../services/index.js'
-import { clamp, computeIfAbsent, computeIfAbsentAsync, deepClone, deepEqual, isObject, square } from '../../Utils.js'
 
 export type ProjectData = Record<string, Record<string, unknown>>
 
@@ -99,6 +99,9 @@ export class Deepslate {
 		const newCacheState = [settings, `${seed}`, biomeState]
 		if (!deepEqual(this.cacheState, newCacheState)) {
 			const noiseSettings = this.createNoiseSettings(settings)
+			if (noiseSettings.noise.xzSize === 0 || noiseSettings.noise.ySize === 0) {
+				throw new Error('size_horizontal or size_vertical cannot be zero')
+			}
 			const biomeSource = await this.createBiomeSource(noiseSettings, biomeState, seed)
 			const chunkGenerator = this.isVersion('1.19')
 				?	new this.d.NoiseChunkGenerator(biomeSource, noiseSettings)

src/app/components/previews/NoiseSettingsPreview.tsx

@@ -3,18 +3,18 @@ import { clampedMap } from 'deepslate'
 import type { mat3 } from 'gl-matrix'
 import { vec2 } from 'gl-matrix'
 import { useCallback, useMemo, useRef, useState } from 'preact/hooks'
+import { Store } from '../../Store.js'
+import { iterateWorld2D, randomSeed } from '../../Utils.js'
 import { getProjectData, useLocale, useProject } from '../../contexts/index.js'
 import { useAsync } from '../../hooks/index.js'
 import { CachedCollections } from '../../services/index.js'
-import { Store } from '../../Store.js'
-import { iterateWorld2D, randomSeed } from '../../Utils.js'
-import { Btn, BtnInput, BtnMenu } from '../index.js'
+import { Btn, BtnInput, BtnMenu, ErrorPanel } from '../index.js'
 import type { ColormapType } from './Colormap.js'
 import { getColormap } from './Colormap.js'
 import { ColormapSelector } from './ColormapSelector.jsx'
 import { DEEPSLATE } from './Deepslate.js'
-import type { PreviewProps } from './index.js'
 import { InteractiveCanvas2D } from './InteractiveCanvas2D.jsx'
+import type { PreviewProps } from './index.js'
 
 export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) => {
 	const { locale } = useLocale()
@@ -24,7 +24,7 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
 	const [layer, setLayer] = useState('terrain')
 	const state = JSON.stringify(data)
 
-	const { value } = useAsync(async () => {
+	const { value, error } = useAsync(async () => {
 		const unwrapped = DataModel.unwrapLists(data)
 		await DEEPSLATE.loadVersion(version, getProjectData(project))
 		const biomeSource = { type: 'fixed', biome }
@@ -88,6 +88,10 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
 
 	const allBiomes = useMemo(() => CachedCollections?.get('worldgen/biome') ?? [], [version])
 
+	if (error) {
+		return <ErrorPanel error={error} prefix="Failed to initialize preview: " />
+	}
+
 	return <>
 		<div class="controls preview-controls">
 			{focused.map(s => <Btn label={s} class="no-pointer" /> )}

src/styles/global.css

@@ -1366,6 +1366,11 @@ main.has-project {
 	margin: 10px 0;
 }
 
+.error svg {
+	display: inline;
+	fill: currentColor;
+}
+
 .error h3 span {
 	margin-left: 8px;
 	cursor: pointer;