keep track of source

Author: MathMan05

src/webpage/assembler/assembler.ts

@@ -145,6 +145,8 @@ function assemble(files: [string, string][]) {
 	const globalDataLabels: linkerInfo = new Map();
 	const globalLabelMap: labelMap = new Map();
 
+	const asmMap = new Map<number, {file: string; line: number}>();
+
 	function link(labelMap: labelMap, dataLables: linkerInfo, globalRun = false, macro = false) {
 		const ram = new Ram(dataView, textView, [dataIndex, textIndex, 1 << 22]);
 
@@ -293,6 +295,10 @@ function assemble(files: [string, string][]) {
 						file,
 					);
 				}
+				asmMap.set(place === "text" ? textIndex + 0x00400000 : dataIndex + 0x10010000, {
+					file,
+					line: i,
+				});
 				if ((directive === "ascii" || directive === "asciz") && place === "data") {
 					if (data.type !== "string") {
 						throw new AssemblError(I18n.errors.notAString(i + 1 + "", data.type), i, file);
@@ -1204,6 +1210,6 @@ function assemble(files: [string, string][]) {
 	console.warn("global linking");
 	const ram = link(globalLabelMap, globalDataLabels, true);
 	const main = globalLabelMap.get("main");
-	return [ram, main || 0x00400000] as [Ram, number];
+	return [ram, main || 0x00400000, asmMap] as [Ram, number, typeof asmMap];
 }
 export {assemble, AssemblError};

src/webpage/editor/editor.ts

@@ -82,26 +82,42 @@ class Editor extends EventTarget {
 	height = 18;
 	charWidth = 18;
 	postDraw: (() => void)[] = [];
+	focusedLine?: number;
+	focusLine(index?: number) {
+		this.focusedLine = index;
+		const linedown = Math.floor(this.scroll.linedown);
+		if (index !== undefined) {
+			console.log(index, linedown, this.height);
+			if (index < linedown) {
+				this.scroll.linedown = index;
+			}
+			if (index > linedown + this.height) {
+				this.scroll.linedown = this.height + index;
+			}
+		}
+
+		this.forceCanvasUpdate();
+	}
 	renderToCanvas(ctx: CanvasRenderingContext2D) {
 		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 		const fontSize = this.fontSize;
 		const height = Math.floor(ctx.canvas.height / this.fontSize);
-		this.height = height;
+		this.height = height || this.height;
 		ctx.font = `${fontSize}px monospace`;
 		const charWidth = ctx.measureText("a").width;
 		this.charWidth = charWidth;
 		ctx.textBaseline = "hanging";
 		const linedown = Math.floor(this.scroll.linedown);
 		const widthNeeded = this.widthNeeded();
+		const theme = (localStorage.getItem("theme") || "dark") as "light" | "dark";
 		for (let i = linedown; i < height + linedown; i++) {
 			const line = this.lines[i];
-			if (line && line.errored) {
-				ctx.fillStyle = "lemonchiffon";
+			if ((line && line.errored) || this.focusedLine === i) {
+				ctx.fillStyle = theme == "light" ? "lemonchiffon" : "yellowgreen";
 				const y = (i - linedown) * fontSize;
 				ctx.fillRect(widthNeeded + 10, y, ctx.canvas.width, this.fontSize);
 			}
 		}
-		const theme = (localStorage.getItem("theme") || "dark") as "light" | "dark";
 
 		if ("highlights" in this.cursor) {
 			ctx.fillStyle = theme == "light" ? "LightBlue" : "darkblue";
@@ -538,10 +554,14 @@ class Editor extends EventTarget {
 		}
 		return strings;
 	}
+	forceCanvasUpdate = () => {};
 	ownCanvas(c: HTMLCanvasElement) {
 		let lastClicked = 0;
 		const ctx = c.getContext("2d");
 		if (!ctx) throw Error("Unable to get canvas context 2d");
+		this.forceCanvasUpdate = () => {
+			this.renderToCanvas(ctx);
+		};
 		const mut = new ResizeObserver((e) => {
 			for (const _ of e) {
 			}
@@ -943,34 +963,33 @@ class Editor extends EventTarget {
 		try {
 			this.console.addMessage("\n" + I18n.startingAssembly() + "\n\n");
 			let emu: Symstem;
+			const asm: [string, string][] = [];
 			if (this.dir && this.fileDir) {
 				const dirL = this.fileDir.split("/");
 				dirL.pop();
 				const dir = dirL.join("/") + "/";
-				const build: [string, string][] = [[this.string(), this.fileDir]];
+				asm.push([this.string(), this.fileDir]);
 				for await (const [name, thing] of this.dir.getAllInDir()) {
 					if (thing instanceof Directory) continue;
 					if (!name.endsWith(".asm")) continue;
 					const thisDir = dir + name;
 					if (thisDir === this.fileDir) continue;
 					const editor = Editor.editMap.get(thisDir);
 					if (editor) {
-						build.push([editor.string(), thisDir]);
+						asm.push([editor.string(), thisDir]);
 					} else {
-						build.push([await thing.text(), thisDir]);
+						asm.push([await thing.text(), thisDir]);
 					}
 				}
-				const [ram, pc] = assemble(build);
-				emu = new Symstem(ram, this.console);
-				emu.pc = pc;
 			} else {
-				const [ram, pc] = assemble([[this.string(), this.fileDir || this.fileName]]);
-				emu = new Symstem(ram, this.console);
-				emu.pc = pc;
+				asm.push([this.string(), this.fileDir || this.fileName]);
 			}
+			const [ram, pc, instMap] = assemble(asm);
+			emu = new Symstem(ram, this.console);
+			emu.pc = pc;
 			emu.intRegis[2] = 0x7fffeffcn;
 			this.console.addMessage("\n" + I18n.finishedAssembly() + "\n\n");
-			this.dispatchEvent(new AssembleEvent("Assemble", emu));
+			this.dispatchEvent(new AssembleEvent("Assemble", {emu, instMap, asm}));
 		} catch (e) {
 			if (e instanceof AssemblError) {
 				this.dispatchEvent(new AssembleEvent("Assemble", e));
@@ -989,8 +1008,15 @@ class Editor extends EventTarget {
 	}
 }
 class AssembleEvent extends Event {
-	sys: Symstem | AssemblError;
-	constructor(code: string, sys: Symstem | AssemblError) {
+	sys:
+		| {emu: Symstem; instMap: Map<number, {file: string; line: number}>; asm: [string, string][]}
+		| AssemblError;
+	constructor(
+		code: string,
+		sys:
+			| {emu: Symstem; instMap: Map<number, {file: string; line: number}>; asm: [string, string][]}
+			| AssemblError,
+	) {
 		super(code);
 		this.sys = sys;
 	}

src/webpage/editor/line.ts

@@ -196,6 +196,7 @@ class Line {
 		charWidth: number,
 		tips: string[],
 	) {
+		if (this.owner.focusedLine !== undefined) return;
 		y += this.owner.fontSize + 6;
 		x -= 5;
 		if (ctx.canvas.width - x <= charWidth * 40) {

src/webpage/executeTab/etab.ts

@@ -120,11 +120,19 @@ class Etab {
 			this.updateMemCell(addr, false);
 		}
 	}
-	handSystem(sys: Symstem) {
+	instMap?: Map<number, {file: string; line: number}>;
+	asm?: [string, string][];
+	handSystem(sys: {
+		emu: Symstem;
+		instMap: Map<number, {file: string; line: number}>;
+		asm: [string, string][];
+	}) {
 		this.csysQue = new Array(1000);
-		this.sys = sys;
+		this.sys = sys.emu;
+		this.instMap = sys.instMap;
+		this.asm = sys.asm;
 		this.systemReg();
-		this.csys = sys.compact();
+		this.csys = sys.emu.compact();
 	}
 	systemReg() {
 		if (!this.sys) return;
@@ -255,6 +263,7 @@ class Etab {
 		this.started = false;
 		this.csysQue = new Array(1000);
 		this.changeButtonStates();
+		this.onLine(undefined);
 	}
 	updateLastUsed() {
 		try {
@@ -285,6 +294,8 @@ class Etab {
 			}
 		}
 	}
+
+	onLine: (line: {line: number; file: string} | undefined) => void = () => {};
 	async start() {
 		if (this.sys) {
 			if (this.running) await this.running;
@@ -303,6 +314,7 @@ class Etab {
 							console.log("waitStep");
 							await this.waitStep();
 						} else {
+							this.onLine(undefined);
 							this.enque();
 							if (i >= 1000) {
 								i = 0;
@@ -326,6 +338,7 @@ class Etab {
 				if (elm && !sys.done) {
 					elm.classList.add("running");
 				}
+				if (sys.done) this.onLine(undefined);
 				res();
 				this.running = undefined;
 				this.stopped = true;
@@ -358,11 +371,13 @@ class Etab {
 							console.error(e);
 						}
 					}
+					this.onLine(this.getCurrentIndex());
 					elm = this.htmlMap.get(this.sys.pc);
 					if (elm && !sys.done) {
 						elm.classList.add("running");
 						elm.scrollIntoView({behavior: "instant", block: "center"});
 					}
+					if (sys.done) this.onLine(undefined);
 					this.updateRegis();
 				}
 				this.changeButtonStates();
@@ -372,6 +387,24 @@ class Etab {
 			}
 		});
 	}
+	getFileLine(line: {file: string; line: number}): string {
+		if (Number.isNaN(line.line)) return "";
+		if (!this.asm) return "";
+		for (const [contents, file] of this.asm) {
+			if (file === line.file) {
+				return (
+					(this.asm.length === 1 ? "" : line.file.replace(/.*:\//m, "") + ", ") +
+					line.line +
+					": " +
+					contents.split("\n")[line.line]
+				);
+			}
+		}
+		return "";
+	}
+	getCurrentIndex() {
+		return this.instMap?.get(this.sys?.pc as number);
+	}
 	createHTML() {
 		this.htmlMap = new Map();
 		const div = document.createElement("div");
@@ -394,6 +427,12 @@ class Etab {
 		const basic = document.createElement("th");
 		basic.textContent = I18n.basic();
 		tr.append(basic);
+
+		if (this.instMap) {
+			const source = document.createElement("th");
+			source.textContent = I18n.source();
+			tr.append(source);
+		}
 		table.append(tr);
 		if (this.sys) {
 			this.enableButtons();
@@ -416,6 +455,15 @@ class Etab {
 				const basic = document.createElement("td");
 				basic.textContent = toAsm(val);
 				tr.append(basic);
+
+				if (this.instMap) {
+					const code = document.createElement("td");
+					const val = this.instMap.get(i);
+					if (val) {
+						code.textContent = this.getFileLine(val);
+					}
+					tr.append(code);
+				}
 				table.append(tr);
 			}
 		}

src/webpage/index.ts

@@ -362,13 +362,35 @@ assemble.onclick = () => {
 
 const editButton = document.getElementById("EditButton") as HTMLButtonElement;
 const executeButton = document.getElementById("ExecuteButton") as HTMLButtonElement;
+let inEdit = true;
 editButton.onclick = () => {
+	inEdit = true;
 	editArea();
+	console.log(inEdit);
 };
 executeButton.onclick = () => {
-	if (system.isReady()) executeArea();
+	if (system.isReady()) {
+		executeArea();
+		inEdit = false;
+		console.log(inEdit);
+	}
 };
 let system = new Etab();
+system.onLine = (line) => {
+	for (const editor of editors) {
+		if (editor.fileDir === line?.file) {
+			editor.focusLine(line?.line);
+		} else {
+			editor.focusLine(undefined);
+		}
+	}
+	console.log(inEdit);
+	if (inEdit) {
+		const editor = editors.find((editor) => editor.fileDir === line?.file);
+		if (!editor) return;
+		buttons.get(editor)?.click();
+	}
+};
 
 const buttons = new Map<Editor, HTMLButtonElement>();
 const saved = new Map<Editor, boolean>();
@@ -439,9 +461,6 @@ async function editArea() {
 			});
 
 			button.addEventListener("click", () => {
-				if (focusedEditor !== editor) {
-					system.disable();
-				}
 				focusedEditor = editor;
 				if (selectedTab) {
 					selectedTab.classList.remove("selected");
@@ -677,6 +696,7 @@ async function openProject(proj: Project) {
 const consoleElm = document.getElementById("console") as HTMLDivElement;
 consoleElm.append(cons.makeHtml());
 function executeArea() {
+	inEdit = false;
 	area.innerHTML = "";
 
 	editButton.classList.remove("selected");

src/webpage/style.css

@@ -9,6 +9,7 @@ body {
 	-webkit-text-size-adjust: 100%;
 }
 .dark-theme {
+	color-scheme: dark;
 	background: #1b1b1b;
 	color: #ffffff;
 	#mainRow {

translations/en.json

@@ -93,6 +93,7 @@
 	"memvalue":"Value (+$1)",
 	"code": "Code",
 	"basic": "Basic",
+	"source":"Source",
 	"startScreen": "Open a file or start a project!",
 	"startProject": "Start a new project",
 	"openFile": "Open a file!",