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/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>
 	</>