feat: new editor

Author: ItsMeBrianD

src/lib/Editor.svelte

@@ -89,4 +89,14 @@ export class MMSProject {
 
 		return f;
 	};
+
+	getFile = (path: string[]) => {
+		return path.reduce<FileTreeLike | null>((fs: FileTreeLike | null, name: string) => {
+			if (fs?.isDir) {
+				return fs.children?.[name] ?? null;
+			} else {
+				return fs;
+			}
+		}, this.fs);
+	};
 }

src/lib/MMSInterop.svelte.ts

@@ -1,51 +1,89 @@
 <script lang="ts" module>
-	export const SupportedPreviewKinds = ['WorldGen__Noise'];
+	export const SupportedPreviewKinds = ['Noise'];
 </script>
 
 <script lang="ts">
-	import type { LeafNode } from '../tree/types';
+	import type { MmsSymbol } from '@minecraftmetascript/mms-wasm';
+
 	import * as deepslate from 'deepslate';
+	import { debounce } from 'es-toolkit';
+	import type { Action } from 'svelte/action';
+
+	let { symbol }: { symbol: MmsSymbol } = $props();
+
+	const deepslatePreview: Action<HTMLCanvasElement, MmsSymbol> = (
+		canvas: HTMLCanvasElement,
+		s: MmsSymbol
+	) => {
+		let symbol = s;
+
+		const update = debounce(() => {
+			const random = new deepslate.XoroshiroRandom([
+				BigInt(Math.floor(performance.now())),
+				BigInt(Math.floor(performance.timeOrigin))
+			]);
 
-	let { node }: { node: LeafNode } = $props();
-
-	const random = new deepslate.XoroshiroRandom([
-		BigInt(Math.floor(performance.now())),
-		BigInt(Math.floor(performance.timeOrigin))
-	]);
-
-	$effect(() => {
-		if (!canvas) {
-			console.warn('No Canvas');
-			return;
-		}
-		if (!node || !node.data) {
-			console.warn('No Node or Data');
-			return;
-		}
-		const ctx = canvas.getContext('2d');
-		if (!ctx) {
-			console.warn('No Canvas 2d Context');
-			return;
-		}
-		const box = canvas.getBoundingClientRect();
-		switch (node.data?.kind) {
-			case 'WorldGen__Noise': {
-				try {
-					const normalNoise = new deepslate.NormalNoise(random, node.data.value);
-					for (let pixelX = 0; pixelX < box.width; pixelX++) {
-						for (let pixelY = 0; pixelY < box.height; pixelY++) {
-							ctx.fillStyle = `hsl(${normalNoise.sample(pixelX, pixelY, 0) * 360}, 50%, 50%)`;
-							ctx.fillRect(pixelX, pixelY, 1, 1);
+			if (!canvas) {
+				console.warn('No Canvas');
+				return;
+			}
+			if (!symbol || !symbol.value) {
+				console.warn('No Symbol or Value');
+				return;
+			}
+			const ctx = canvas.getContext('2d');
+			if (!ctx) {
+				console.warn('No Canvas 2d Context');
+				return;
+			}
+			// TypeScript
+			const dpr = window.devicePixelRatio || 1;
+			const rect = canvas.getBoundingClientRect();
+
+			// Set intrinsic size to match CSS size * DPR
+			canvas.width = Math.floor(rect.width * dpr);
+			canvas.height = Math.floor(rect.height * dpr);
+
+			// Scale the context so 1 unit = 1 CSS pixel
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+			ctx.scale(3, 3);
+
+			switch (symbol.type) {
+				case 'Noise': {
+					requestAnimationFrame(() => {
+						try {
+							console.log(symbol.value);
+							const normalNoise = new deepslate.NormalNoise(random, symbol.value as any);
+							for (let pixelX = 0; pixelX < rect.width; pixelX += 1) {
+								for (let pixelY = 0; pixelY < rect.height; pixelY += 1) {
+									const val = normalNoise.sample(pixelX, pixelY, 0);
+									const color = `hsl(0, ${val * 50 + 50}%, ${val * 20 + 40}%)`;
+									ctx.fillStyle = color;
+									ctx.fillRect(pixelX, pixelY, 1, 1);
+								}
+							}
+						} catch (e) {
+							console.warn(e);
 						}
-					}
-				} catch (e) {
-					console.warn(e);
+					});
 				}
 			}
-		}
-	});
+		}, 250);
 
-	let canvas = $state<HTMLCanvasElement | null>();
+		update();
+
+		window.addEventListener('resize', update);
+
+		return {
+			update(next: MmsSymbol) {
+				symbol = next;
+				update();
+			},
+			destroy() {
+				window.removeEventListener('resize', update);
+			}
+		};
+	};
 </script>
 
-<canvas class="aspect-square h-full max-h-full w-full max-w-full" bind:this={canvas}></canvas>
+<canvas class="h-full w-full" use:deepslatePreview={symbol}></canvas>