chore: editor improvements

Author: ItsMeBrianD

package.json

@@ -20,6 +20,7 @@
 		"@sveltejs/kit": "^2.22.0",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
 		"@tailwindcss/vite": "^4.0.0",
+		"@types/bun": "^1.2.21",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
@@ -52,6 +53,7 @@
 		"codemirror": "^6.0.2",
 		"deepslate": "^0.24.0",
 		"es-toolkit": "^1.39.10",
+		"svelte-splitpanes": "^8.0.9",
 		"valibot": "^1.1.0"
 	}
 }

src/lib/deepslate/offload/DeepslateRendererOffloaded.svelte

@@ -12,7 +12,7 @@
 		type Point
 	} from './proto';
 	import { parse } from 'valibot';
-	import { debounce } from 'es-toolkit';
+	import { debounce, throttle } from 'es-toolkit';
 	import { useEditorContext } from '../../editor/MMSEditor.svelte';
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import {
@@ -29,11 +29,16 @@
 
 	const editor = useEditorContext();
 
-	const ds: Action<HTMLCanvasElement> = (canvas) => {
+	const ds: Action<HTMLCanvasElement> = (canvas: HTMLCanvasElement) => {
 		const offscreen = canvas.transferControlToOffscreen();
 		const worker = new DeepslateRenderWorker({ name: 'Deepslate' });
 		const send = (m: DeepslateRenderWorkerMessage, opts?: Parameters<Worker['postMessage']>[1]) =>
 			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!;
+		}
 
 		offscreen.height = canvas.clientHeight;
 		offscreen.width = canvas.clientWidth;
@@ -47,15 +52,16 @@
 
 		const resizeObserver = new ResizeObserver(
 			debounce(() => {
-				console.log('Resize detected');
+				const box = parent.getBoundingClientRect();
+
 				send({
 					kind: 'update::canvas_dimensions',
-					x: canvas.clientWidth,
-					y: canvas.clientHeight
+					x: Math.floor(box.width),
+					y: Math.floor(box.height)
 				});
-			}, 250)
+			}, 200)
 		);
-		resizeObserver.observe(canvas);
+		resizeObserver.observe(parent, { box: 'device-pixel-content-box' });
 
 		$effect(() => {
 			if (editor.previewSymbol) {
@@ -96,14 +102,24 @@
 			});
 		});
 
-		const fetchValue = debounce(() => {
+		$effect(() => {
+			send({
+				kind: 'update::marker_pos',
+				pos: mouseLocked ? mousePos : null
+			});
+		});
+
+		const fetchValue = () => {
 			send({
 				kind: 'request::value_at_point',
 				point: mousePos!
 			});
-		}, 25);
+		};
 		$effect(() => {
-			if (mousePos) fetchValue();
+			// We keep the editor.previewSymbol dependency
+			// so that the value will refresh when the symbol is modified,
+			//  without needing to unlock the mouse
+			if (mousePos && editor.previewSymbol) fetchValue();
 		});
 
 		worker.addEventListener('message', (e) => {
@@ -119,12 +135,12 @@
 
 		return {
 			destroy() {
-				resizeObserver.unobserve(canvas);
+				resizeObserver.unobserve(parent);
 			}
 		};
 	};
 
-	let scale = $state(8);
+	let scale = $state(64);
 	let originX = $state(0);
 	let originY = $state(0);
 	let worldHeight = $state(256);
@@ -157,10 +173,32 @@
 			scale
 		);
 	};
+
+	let prevMouse = $state<{ x: number; y: number } | null>(null);
+	const drag = throttle((e: MouseEvent | PointerEvent) => {
+		if (prevMouse) {
+			const xDiff = (prevMouse?.x ?? 0) - e.pageX;
+			const yDiff = e.pageY - (prevMouse?.y ?? 0);
+			originX += Math.round(xDiff / scale);
+			originY += Math.round(yDiff / scale);
+		}
+		prevMouse = { x: e.pageX, y: e.pageY };
+	}, 20);
+
+	const dragStart = () => {
+		prevMouse = null;
+		window.addEventListener('mousemove', drag);
+		window.addEventListener('mouseup', dragEnd);
+	};
+	const dragEnd = () => {
+		window.removeEventListener('mousemove', drag);
+		window.removeEventListener('mouseup', dragEnd);
+		prevMouse = null;
+	};
 </script>
 
 {#if editor.previewSymbol}
-	<div class="relative h-full w-full">
+	<div class="relative h-full max-h-full w-full overflow-y-hidden" data-preview-root>
 		{#if mousePos}
 			<div
 				class="absolute top-2 right-2 flex items-center gap-2 bg-slate-600/50 px-2 py-1 font-mono text-xs font-bold text-slate-50"
@@ -204,6 +242,9 @@
 				<Icon src={Minus} class="w-6" />
 			</button>
 		</div>
+		<div class="absolute right-2 bottom-2 bg-slate-600/50 px-1 py-0.5 text-[0.5rem] text-slate-50">
+			Preview powered by <a href="https://github.com/misode/deepslate" target="_blank">Deepslate</a>
+		</div>
 
 		<div class="absolute bottom-2 left-2 flex flex-col items-start gap-2">
 			<span class="bg-slate-600/50 px-1 py-0.5 text-sm font-bold text-slate-50">
@@ -248,10 +289,13 @@
 		</div>
 
 		<canvas
-			class="h-full w-full"
 			use:ds
 			onmousemove={updateMousePos}
 			ondblclick={toggleMouseLock}
-		></canvas>
+			onmousedown={dragStart}
+			class="cursor-grab"
+			class:cursor-grabbing={prevMouse}
+		>
+		</canvas>
 	</div>
 {/if}

src/lib/deepslate/offload/deepslate_render_worker.ts

@@ -2,8 +2,7 @@ import * as deepslate from 'deepslate';
 import { parse } from 'valibot';
 import { DeepslateRenderWorkerMessageSchema, type Point } from './proto';
 import { viridis } from './viridis';
-import * as mcdoc from '@spyglassmc/mcdoc';
-import { pixelToCoordinate } from './lib';
+import { coordinateToPixel, pixelToCoordinate } from './lib';
 
 declare var self: DedicatedWorkerGlobalScope;
 export {}; // Make it a module if not already one
@@ -13,16 +12,28 @@ let ctx: OffscreenCanvasRenderingContext2D;
 let seed: [bigint, bigint];
 let random: deepslate.Random;
 let updateFn: (value: object) => void;
-let pointValFn: (point: Point) => number;
-let pointValLabel: string = '';
+
+let pointValFn: ((point: Point) => number) | undefined;
+let memo: Map<[number, number], number> = new Map();
+const getVal = (p: Point): number | null => {
+	if (!pointValFn) return null;
+	if (memo.has([p.x, p.y])) {
+		return memo.get([p.x, p.y])!;
+	}
+	const res = pointValFn(p);
+	memo.set([p.x, p.y], res);
+	return res;
+};
 
 let value: object;
+let pointValLabel: string = '';
 
 // View Configuration
 let scale = 32; // 32 pixels -> 1 block
 let origin = { x: 0, y: 0 };
 let worldHeight: number;
 let minY: number;
+let markerPosition: Point | null = null;
 
 const reseed = () => {
 	seed = [BigInt(Math.floor(performance.now())), BigInt(Math.floor(performance.timeOrigin))] as [
@@ -36,7 +47,7 @@ const reset = () => {
 	random = new deepslate.XoroshiroRandom(seed);
 };
 
-const drawAtCoords = (fn: (p: Point) => number, worldBounded = false) => {
+const drawAtCoords = (worldBounded = false) => {
 	// TODO: We are doing a bit of overdraw here to make sure that we cover the whole canvas -- might want to fix that
 	const maxY = minY + worldHeight;
 	const yInBounds = (y: number) => {
@@ -57,7 +68,8 @@ const drawAtCoords = (fn: (p: Point) => number, worldBounded = false) => {
 				);
 
 				if (yInBounds(coord.y)) {
-					const value = fn(coord);
+					const value = getVal(coord);
+					if (value === null) continue;
 					ctx.fillStyle = viridis(value);
 					ctx.fillRect(xPixel, yPixel, scale, scale);
 					continue;
@@ -83,21 +95,6 @@ const drawAtCoords = (fn: (p: Point) => number, worldBounded = false) => {
 	});
 };
 
-const d = {
-	get width() {
-		return Math.floor(canvas.width / scale);
-	},
-	get height() {
-		return Math.floor(canvas.height / scale);
-	},
-	coordAtPixel(pixel: Point): Point {
-		return {
-			x: Math.floor(pixel.x / scale),
-			y: Math.floor(pixel.y / scale)
-		};
-	}
-};
-
 const updateContext = (): boolean => {
 	const c = canvas.getContext('2d');
 	if (!c) return false;
@@ -120,9 +117,6 @@ const main = (e: MessageEvent) => {
 		case 'init': {
 			canvas = message.canvas;
 			updateContext();
-			// fetchData().catch(() => {
-			// 	console.error('Failed to load mcdoc data');
-			// });
 			break;
 		}
 		case 'injest::noise': {
@@ -133,6 +127,7 @@ const main = (e: MessageEvent) => {
 			break;
 		}
 		case 'update::preview': {
+			memo = new Map();
 			const { type } = message;
 			if (type in previews) {
 				updateFn = previews[type as keyof typeof previews];
@@ -159,17 +154,39 @@ const main = (e: MessageEvent) => {
 				? self.postMessage({
 						kind: 'response::value_at_point',
 						point: message.point,
-						value: pointValFn(message.point) ?? null,
+						value: getVal(message.point) ?? null,
 						label: pointValLabel
 					})
 				: null;
 			return;
 		}
+
+		case 'update::marker_pos': {
+			markerPosition = message.pos;
+			break;
+		}
 	}
 
 	if (ctx) {
 		reset(); // Ensure we end up with a steady random structure unless explicitly reset
 		updateFn?.(value);
+
+		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);
+				});
+			});
+		}
 	}
 };
 
@@ -184,7 +201,7 @@ const previews = {
 			return res;
 		};
 		pointValLabel = 'Value';
-		drawAtCoords(pointValFn);
+		drawAtCoords();
 	},
 	DensityFunction: (value: object) => {
 		let fn = deepslate.DensityFunction.fromJson(value);
@@ -197,6 +214,6 @@ const previews = {
 			return res;
 		};
 		pointValLabel = 'Density';
-		drawAtCoords(pointValFn, true);
+		drawAtCoords(true);
 	}
 };

src/lib/deepslate/offload/lib.ts

@@ -7,7 +7,6 @@ export const pixelToCoordinate = (
 	scale: number
 ): Point => {
 	const out = { ...pixel };
-    debugger
 	// Translate to coordinate grid from pixel grid
 	const pX = Math.floor(out.x / scale);
 	const pY = Math.floor(out.y / scale);
@@ -28,3 +27,27 @@ export const pixelToCoordinate = (
 
 	return out;
 };
+
+export const coordinateToPixel = (
+	cood: Point,
+	offset: Point,
+	canvasSize: { w: number; h: number },
+	scale: number
+): Point => {
+	const out = { ...cood };
+	// Apply offset
+	out.x += offset.x;
+	out.y += offset.y;
+
+	// Translate to pixel grid from coordinate grid
+	out.x = out.x * scale;
+	out.y = canvasSize.h - out.y * scale;
+
+	out.x += Math.floor(canvasSize.w / 2);
+	out.y -= Math.floor(canvasSize.h / 2);
+
+	out.x -= out.x % scale;
+	out.y -= out.y % scale;
+
+	return out;
+};

src/lib/deepslate/offload/proto.ts

@@ -44,6 +44,11 @@ export const ResponseValueAtPoint = v.object({
 	label: v.string()
 });
 
+export const UpdateMarkerPosSchema = v.object({
+	kind: v.literal('update::marker_pos'),
+	pos: v.nullable(PointSchema)
+});
+
 export const InjestNoiseMessageSchema = v.object({
 	kind: v.literal('injest::noise'),
 	ref: v.object({ namespace: v.string(), name: v.string() }),
@@ -57,6 +62,7 @@ export const DeepslateRenderWorkerMessageSchema = v.union([
 	UpdateViewMessageSchema,
 	InjestNoiseMessageSchema,
 	RequestValueAtPoint,
-	ResponseValueAtPoint
+	ResponseValueAtPoint,
+	UpdateMarkerPosSchema
 ]);
 export type DeepslateRenderWorkerMessage = v.InferOutput<typeof DeepslateRenderWorkerMessageSchema>;