feat: major editor updates

Author: ItsMeBrianD

bun.lock

@@ -50,6 +50,7 @@
 		"@steeze-ui/tabler-icons": "^3.3.1",
 		"@sveltejs/adapter-static": "^3.0.9",
 		"@types/golang-wasm-exec": "^1.15.2",
+		"@zip.js/zip.js": "^2.8.2",
 		"codemirror": "^6.0.2",
 		"deepslate": "^0.24.0",
 		"es-toolkit": "^1.39.10",

package.json

@@ -1,7 +1,7 @@
 import { Go, type FileTreeLike, type MmsSymbol } from '@minecraftmetascript/mms-wasm';
 import MMSWasm from '@minecraftmetascript/mms-wasm/dist/main.wasm?init';
 import * as deepslate from 'deepslate';
-
+import * as zip from '@zip.js/zip.js';
 export class MMSFile {
 	private _content: string;
 	get content() {
@@ -36,6 +36,30 @@ export class MMSFile {
 
 export class MMSProject {
 	private readonly goInstance: Go;
+	async download() {
+		const zipFileWriter = new zip.BlobWriter();
+		const zipWriter = new zip.ZipWriter(zipFileWriter);
+		const addLeaves = (root: FileTreeLike, path: string[] = []) => {
+			if (root.isDir) {
+				for (const [, child] of Object.entries(root.children ?? {}))
+					addLeaves(child, [...path, root.name]);
+			} else {
+				zipWriter.add([...path, root.name].join('/'), new zip.TextReader(JSON.stringify(root)));
+			}
+		};
+		if (!this._fs) return;
+		addLeaves(this._fs);
+		await zipWriter.close();
+
+		const zipFileBlob = await zipFileWriter.getData();
+		const url = URL.createObjectURL(zipFileBlob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = 'project.zip';
+		a.click();
+		URL.revokeObjectURL(url);
+		a.remove();
+	}
 
 	async init(signal?: AbortSignal) {
 		const wasmInstance = await MMSWasm(this.goInstance.importObject);
@@ -45,7 +69,7 @@ export class MMSProject {
 		signal?.addEventListener('abort', () => {
 			console.log('Abort Signal Received. Quitting MMS');
 			this.goInstance.exit(1);
-		});	
+		});
 	}
 
 	constructor() {

src/lib/MMSProject.svelte.ts

@@ -13,7 +13,7 @@
 	} from './proto';
 	import { parse } from 'valibot';
 	import { debounce, throttle } from 'es-toolkit';
-	import { useEditorContext } from '../../editor/MMSEditor.svelte';
+	import { useEditorContext } from '../editor/MMSEditor.svelte';
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import {
 		ArrowDown,
@@ -36,7 +36,6 @@
 			worker.postMessage(parse(DeepslateRenderWorkerMessageSchema, m), opts);
 		let parent: HTMLElement = canvas;
 		while (parent !== document.body && !('previewRoot' in parent.dataset)) {
-			console.log(parent.dataset);
 			parent = parent.parentElement!;
 		}
 
@@ -140,7 +139,15 @@
 		};
 	};
 
-	let scale = $state(64);
+	let scale = $state(8);
+
+	const updateScale = throttle((delta: number) => {
+		let next = scale;
+		next += delta;
+		next -= next % 2;
+		if (next < 2) next = 1;
+		scale = next;
+	}, 50);
 	let originX = $state(0);
 	let originY = $state(0);
 	let worldHeight = $state(256);
@@ -223,21 +230,13 @@
 			</span>
 			<button
 				class="bg-slate-600/50 text-slate-50 hover:bg-slate-600"
-				onclick={(e) => (e.shiftKey ? (scale += 6) : (scale += 2))}
+				onclick={(e) => updateScale(e.shiftKey ? 6 : 2)}
 			>
 				<Icon src={Plus} class="w-6" />
 			</button>
 			<button
 				class="bg-slate-600/50 text-slate-50 hover:bg-slate-600"
-				onclick={(e) => {
-					if (e.shiftKey) {
-						if (scale > 12) scale -= 6;
-						else if (scale > 6) scale = 6;
-						else scale = 2;
-					} else {
-						if (scale > 2) scale -= 2;
-					}
-				}}
+				onclick={(e) => updateScale(e.shiftKey ? -6 : -2)}
 			>
 				<Icon src={Minus} class="w-6" />
 			</button>
@@ -290,6 +289,12 @@
 
 		<canvas
 			use:ds
+			onmousewheel={(e: WheelEvent) => {
+				e.preventDefault();
+
+				if (e.deltaY > 0) updateScale(-2);
+				else updateScale(2);
+			}}
 			onmousemove={updateMousePos}
 			ondblclick={toggleMouseLock}
 			onmousedown={dragStart}

src/lib/deepslate/DeepslateRenderer.svelte

@@ -173,18 +173,15 @@ const main = (e: MessageEvent) => {
 
 		if (markerPosition) {
 			requestAnimationFrame(() => {
-				requestAnimationFrame(() => {
-					if (!markerPosition) return;
-					ctx.fillStyle = 'rgb(255,0,0)';
-					const pos = coordinateToPixel(
-						markerPosition,
-						origin,
-						{ w: canvas.width, h: canvas.height },
-						scale
-					);
-					console.log(pos.x % scale, pos.y % scale);
-					ctx.fillRect(pos.x, pos.y, scale, scale);
-				});
+				if (!markerPosition) return;
+				ctx.fillStyle = 'rgb(255,0,0)';
+				const pos = coordinateToPixel(
+					markerPosition,
+					origin,
+					{ w: canvas.width, h: canvas.height },
+					scale
+				);
+				ctx.fillRect(pos.x, pos.y, scale, scale);
 			});
 		}
 	}