503 lines
15 KiB
JavaScript
503 lines
15 KiB
JavaScript
"use strict";
|
|
|
|
// Hex editor style memory viewer
|
|
globalThis.MemoryWindow = class MemoryWindow extends Toolkit.Window {
|
|
|
|
// Object constructor
|
|
constructor(debug, options) {
|
|
super(debug.gui, options);
|
|
|
|
// Configure instance fields
|
|
this.address = 0x05000000;
|
|
this.debug = debug;
|
|
this.editDigit = null;
|
|
this.pending = { mode: null };
|
|
this.rows = [];
|
|
this.selected = this.address;
|
|
|
|
// Configure element
|
|
this.element.setAttribute("window", "memory");
|
|
|
|
// Configure body
|
|
this.body.element.setAttribute("filter", "");
|
|
|
|
// Configure client
|
|
this.client.setLayout("grid");
|
|
|
|
// Wrapping element to hide overflowing scrollbar
|
|
this.hexWrap = this.client.add(this.newPanel({
|
|
layout : "grid",
|
|
columns: "auto"
|
|
}));
|
|
this.hexWrap.element.setAttribute("name", "wrap-hex");
|
|
|
|
// Configure hex viewer
|
|
this.hex = this.hexWrap.add(this.client.newPanel({
|
|
focusable: true,
|
|
layout : "block",
|
|
hollow : false,
|
|
name : "{memory.hexEditor}",
|
|
overflowX: "auto",
|
|
overflowY: "hidden"
|
|
}));
|
|
this.hex.element.setAttribute("role", "grid");
|
|
this.hex.element.setAttribute("name", "hex");
|
|
this.hex.element.addEventListener("keydown", e=>this.onkeyhex(e));
|
|
this.hex.element.addEventListener("wheel" , e=>this.onwheel (e));
|
|
this.hex.addResizeListener(b=>this.onresize());
|
|
|
|
// Configure properties
|
|
this.setProperty("sim", "");
|
|
this.rows.push(this.hex.add(new MemoryWindow.Row(this, this.hex, 0)));
|
|
this.application.addComponent(this);
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Public Methods //////////////////////////////
|
|
|
|
// Update the display with current emulation data
|
|
refresh(address) {
|
|
|
|
// Do nothing while closed or already waiting to refresh
|
|
if (!this.isVisible() || this.pending.mode !== null)
|
|
return;
|
|
|
|
// Working variables
|
|
address = address === undefined ? this.address : address;
|
|
let lines = this.lines(false);
|
|
|
|
// Configure pending state
|
|
this.pending.mode = "first";
|
|
this.pending.address = null;
|
|
this.pending.line = null;
|
|
|
|
// Request bus data from the WebAssembly core
|
|
this.debug.core.postMessage({
|
|
command: "ReadBuffer",
|
|
sim : this.debug.sim,
|
|
dbgwnd : "Memory",
|
|
address: address,
|
|
lines : lines,
|
|
size : lines * 16
|
|
});
|
|
}
|
|
|
|
// Specify whether the component is visible
|
|
setVisible(visible, focus) {
|
|
let prev = this.visible
|
|
visible = !!visible;
|
|
super.setVisible(visible, focus);
|
|
if (visible && !prev)
|
|
this.refresh();
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Message Methods /////////////////////////////
|
|
|
|
// Message received
|
|
message(msg) {
|
|
switch (msg.command) {
|
|
case "ReadBuffer": this.readBuffer(msg) ; break;
|
|
case "Write" : this.debug.refresh(false); break;
|
|
}
|
|
}
|
|
|
|
// Received bytes from the bus
|
|
readBuffer(msg) {
|
|
let buffer = new Uint8Array(msg.buffer);
|
|
let lines = Math.min(msg.lines, this.rows.length);
|
|
|
|
// Configure instance fields
|
|
this.address = msg.address;
|
|
|
|
// Update display
|
|
for (
|
|
let x = 0, address = msg.address, offset = 0;
|
|
x < lines && offset < buffer.length;
|
|
x++, address = (address + 16 & 0xFFFFFFF0) >>> 0, offset += 16
|
|
) this.rows[x].update(buffer, offset);
|
|
|
|
// Check for pending display updates
|
|
let address = this.pending.address === null ?
|
|
this.address : this.pending.address;
|
|
let line = this.pending.line === null ?
|
|
0 : this.pending.line ;
|
|
let mode = this.pending.mode;
|
|
this.pending.mode = null;
|
|
switch (mode) {
|
|
case "first":
|
|
case null :
|
|
return;
|
|
case "refresh":
|
|
case "scroll" :
|
|
case "seek" :
|
|
this.refresh((address + line * 16 & 0xFFFFFFF0) >>> 0);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Private Methods /////////////////////////////
|
|
|
|
// Write the current edited value to the bus
|
|
commit(value) {
|
|
this.editDigit = null;
|
|
this.debug.core.postMessage({
|
|
command: "Write",
|
|
sim : this.debug.sim,
|
|
dbgwnd : "Memory",
|
|
debug : true,
|
|
address: this.selected,
|
|
type : 0,
|
|
value : value
|
|
});
|
|
}
|
|
|
|
// The window is being displayed for the first time
|
|
firstShow() {
|
|
super.firstShow();
|
|
this.center();
|
|
}
|
|
|
|
// Determine the height in pixels of one row of output
|
|
lineHeight() {
|
|
return Math.max(10, this.rows[0].addr.getBounds().height);
|
|
}
|
|
|
|
// Determine the number of rows of output
|
|
lines(fullyVisible) {
|
|
let gridHeight = this.hex.getBounds().height;
|
|
let lineHeight = this.lineHeight();
|
|
let ret = gridHeight / lineHeight;
|
|
ret = fullyVisible ? Math.floor(ret) : Math.ceil(ret);
|
|
return Math.max(1, ret);
|
|
}
|
|
|
|
// Focus lost event capture
|
|
onblur(e) {
|
|
super.onblur(e);
|
|
if (this.editDigit !== null && !this.contains(e.relatedTarget))
|
|
this.commit(this.editDigit);
|
|
}
|
|
|
|
// Key down event handler
|
|
onkeydown(e) {
|
|
let change = null;
|
|
let digit = null;
|
|
|
|
// Processing by key
|
|
switch (e.key) {
|
|
case "ArrowDown" : change = 16 ; break;
|
|
case "ArrowLeft" : change = - 1 ; break;
|
|
case "ArrowRight": change = 1 ; break;
|
|
case "ArrowUp" : change = -16 ; break;
|
|
case "Enter" : change = 0 ; break;
|
|
case "PageDown" : change = visible; break;
|
|
case "PageUp" : change = -visible; break;
|
|
case "0": case "1": case "2": case "3": case "4":
|
|
case "5": case "6": case "7": case "8": case "9":
|
|
digit = e.key.codePointAt(0) - "0".codePointAt(0);
|
|
break;
|
|
case "a": case "b": case "c": case "d": case "e": case "f":
|
|
digit = e.key.codePointAt(0) - "a".codePointAt(0) + 10;
|
|
break;
|
|
case "A": case "B": case "C": case "D": case "E": case "F":
|
|
digit = e.key.codePointAt(0) - "A".codePointAt(0) + 10;
|
|
break;
|
|
default: return super.onkeydown(e);
|
|
}
|
|
|
|
// Moving the selection
|
|
if (change !== null) {
|
|
if (this.editDigit !== null)
|
|
this.commit(this.editDigit);
|
|
this.setSelected((this.selected + change & 0xFFFFFFFF) >>> 0);
|
|
}
|
|
|
|
// Entering a digit
|
|
if (digit !== null) {
|
|
let selected = this.selected;
|
|
if (this.editDigit !== null) {
|
|
this.commit(this.editDigit << 4 | digit);
|
|
selected++;
|
|
} else this.editDigit = digit;
|
|
if (!this.setSelected(selected))
|
|
for (let row of this.rows)
|
|
row.update();
|
|
}
|
|
|
|
// Configure event
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
// Key down event handler
|
|
onkeyhex(e) {
|
|
|
|
// Control is not pressed
|
|
if (!e.ctrlKey)
|
|
return;
|
|
|
|
// Processing by key
|
|
switch (e.key) {
|
|
case "g": case "G":
|
|
let addr = prompt(this.application.translate("{app.goto_}"));
|
|
if (addr === null)
|
|
break;
|
|
this.setSelected((parseInt(addr, 16) & 0xFFFFFFFF) >>> 0);
|
|
break;
|
|
default: return;
|
|
}
|
|
|
|
// Configure event
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
// Resize event handler
|
|
onresize() {
|
|
let lines = this.lines(false);
|
|
for (let y = this.rows.length; y < lines; y++)
|
|
this.rows[y] =
|
|
this.hex.add(new MemoryWindow.Row(this, this.hex, y * 16));
|
|
for (let y = lines; y < this.rows.length; y++)
|
|
this.hex.remove(this.rows[y]);
|
|
if (this.rows.length > lines)
|
|
this.rows.splice(lines, this.rows.length - lines);
|
|
this.refresh();
|
|
}
|
|
|
|
// Mouse wheel event handler
|
|
onwheel(e) {
|
|
let sign = Math.sign(e.deltaY);
|
|
let mag = Math.abs (e.deltaY);
|
|
if (e.deltaMode == WheelEvent.DOM_DELTA_PIXEL)
|
|
mag = Math.max(1, Math.floor(mag / this.lineHeight()));
|
|
|
|
// Configure element
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// Configure display
|
|
this.scroll(sign * mag);
|
|
}
|
|
|
|
// Move to a new address relative to the current address
|
|
scroll(lines) {
|
|
switch (this.pending.mode) {
|
|
case "first" :
|
|
case "refresh":
|
|
this.pending.mode = "scroll";
|
|
this.pending.line = lines;
|
|
break;
|
|
case "scroll":
|
|
case "seek" :
|
|
this.pending.mode = "scroll";
|
|
this.pending.line += lines;
|
|
break;
|
|
case null:
|
|
this.refresh((this.address + lines * 16 & 0xFFFFFFF0) >>> 0);
|
|
}
|
|
}
|
|
|
|
// Move to a new address positioned at a particular row of output
|
|
seek(address, line) {
|
|
switch (this.pending.mode) {
|
|
case "first" :
|
|
case "refresh":
|
|
this.pending.mode = "seek";
|
|
this.pending.address = address;
|
|
this.pending.line = line;
|
|
break;
|
|
case "scroll":
|
|
case "seek" :
|
|
this.pending.mode = "seek";
|
|
this.pending.address = address;
|
|
this.pending.line += line;
|
|
break;
|
|
case null:
|
|
this.refresh((address - line * 16 & 0xFFFFFFF0) >>> 0);
|
|
}
|
|
}
|
|
|
|
// Specify which byte value is selected
|
|
setSelected(selected) {
|
|
|
|
// The selected cell is not changing
|
|
if (selected == this.selected)
|
|
return false;
|
|
|
|
// An edit was in progress
|
|
if (this.editDigit !== null)
|
|
this.commit(this.editDigit);
|
|
|
|
// Working variables
|
|
let pos = (selected - this.address & 0xFFFFFFFF) >>> 0;
|
|
let visible = this.lines(true) * 16;
|
|
|
|
// The selected cell is visible
|
|
if (pos >= 0 && pos < visible) {
|
|
this.selected = selected;
|
|
for (let y = 0; y < this.rows.length; y++)
|
|
this.rows[y].checkSelected();
|
|
return false;
|
|
}
|
|
|
|
// Working variables
|
|
let down = (selected - this.address & 0xFFFFFFF0) >>> 0;
|
|
let up = (this.address - selected + 15 & 0xFFFFFFF0) >>> 0;
|
|
|
|
// Seek to show the new selection in the view
|
|
this.selected = selected;
|
|
if (down <= up) {
|
|
this.seek((this.address + down & 0xFFFFFFFF) >>> 0,
|
|
visible / 16 - 1);
|
|
} else this.seek((this.address - up & 0xFFFFFFFF) >>> 0, 0);
|
|
return true;
|
|
}
|
|
|
|
};
|
|
|
|
// One row of output
|
|
MemoryWindow.Row = class Row extends Toolkit.Panel {
|
|
|
|
// Object constructor
|
|
constructor(wnd, parent, offset) {
|
|
super(parent.application, {
|
|
layout : "grid",
|
|
columns : "repeat(17, max-content)",
|
|
hollow : false,
|
|
overflowX: "visible",
|
|
overflowY: "visible"
|
|
});
|
|
|
|
// Configure instance fields
|
|
this.cells = new Array(16);
|
|
this.offset = offset;
|
|
this.wnd = wnd;
|
|
|
|
// Configure element
|
|
this.element.setAttribute("role", "row");
|
|
this.element.addEventListener("pointerdown", e=>this.onpointerdown(e));
|
|
|
|
// Address label
|
|
this.addr = this.add(parent.newLabel({ text: "\u00a0" }));
|
|
this.addr.element.setAttribute("role", "gridcell");
|
|
this.addr.element.setAttribute("name", "address");
|
|
|
|
// Byte labels
|
|
for (let x = 0; x < 16; x++)
|
|
this.cells[x] = new MemoryWindow.Cell(wnd, this, offset + x);
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Package Methods /////////////////////////////
|
|
|
|
// Check whether any byte label is the selected byte
|
|
checkSelected() {
|
|
for (let cell of this.cells)
|
|
cell.checkSelected();
|
|
}
|
|
|
|
// Update the output labels with emulation state content
|
|
update(bytes, offset) {
|
|
this.addr.setText(
|
|
("0000000" + this.address().toString(16).toUpperCase()).slice(-8));
|
|
for (let cell of this.cells)
|
|
cell.update(bytes ? bytes[offset++] : cell.value);
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Private Methods /////////////////////////////
|
|
|
|
// Compute the current address of the row
|
|
address() {
|
|
return (this.wnd.address + this.offset & 0xFFFFFFFF) >>> 0;
|
|
}
|
|
|
|
// Pointer down event handler
|
|
onpointerdown(e) {
|
|
|
|
// Error checking
|
|
if (e.button != 0)
|
|
return;
|
|
|
|
// Check whether the click is within the columns of cells
|
|
let next = this.cells[0].getBounds();
|
|
if (e.x < next.left)
|
|
return;
|
|
|
|
// Compute which cell was clicked
|
|
for (let x = 0; x < 16; x++) {
|
|
let cur = next;
|
|
if (x < 15) {
|
|
next = this.cells[x + 1].getBounds();
|
|
if (e.x < (cur.right + next.left) / 2)
|
|
return this.wnd.setSelected(this.cells[x].address());
|
|
} else if (e.x < cur.right)
|
|
return this.wnd.setSelected(this.cells[x].address());
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
// One cell of output
|
|
MemoryWindow.Cell = class Cell extends Toolkit.Label {
|
|
|
|
// Object constructor
|
|
constructor(wnd, parent, offset) {
|
|
super(wnd.application, { text: "\u00a0" });
|
|
|
|
// Configure instance fields
|
|
this.offset = offset;
|
|
this.wnd = wnd;
|
|
this.value = 0x00;
|
|
|
|
// Configure element
|
|
this.element.setAttribute("role", "gridcell");
|
|
this.element.setAttribute("name", "byte");
|
|
|
|
parent.add(this);
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Package Methods /////////////////////////////
|
|
|
|
// Check whether this cell is the selected cell
|
|
checkSelected() {
|
|
let selected = this.address() == this.wnd.selected;
|
|
if (selected)
|
|
this.element.setAttribute("selected", "");
|
|
else this.element.removeAttribute("selected");
|
|
return selected;
|
|
}
|
|
|
|
// Update the output with emulation state content
|
|
update(value) {
|
|
if (value === undefined)
|
|
value = this.value;
|
|
else this.value = value;
|
|
if (this.checkSelected() && this.wnd.editDigit !== null) {
|
|
this.setText("\u00a0" +
|
|
this.wnd.editDigit.toString(16).toUpperCase());
|
|
} else this.setText(("0"+value.toString(16).toUpperCase()).slice(-2));
|
|
}
|
|
|
|
|
|
|
|
///////////////////////////// Private Methods /////////////////////////////
|
|
|
|
// Compute the current address of the cell
|
|
address() {
|
|
return (this.wnd.address + this.offset & 0xFFFFFFFF) >>> 0;
|
|
}
|
|
|
|
};
|