Tweaks from concurrent project

This commit is contained in:
Guy Perfect 2021-09-03 17:38:48 +00:00
parent ff07e1907f
commit af5fc0c4fc
7 changed files with 283 additions and 18 deletions

View File

@ -121,7 +121,6 @@ globalThis.App = class App {
// ROM buffer has been configured // ROM buffer has been configured
setROM(msg) { setROM(msg) {
let dbg = this.debuggers[msg.sim]; let dbg = this.debuggers[msg.sim];
dbg.memory.setVisible(true, true);
dbg.refresh(); dbg.refresh();
} }

View File

@ -167,6 +167,20 @@ body {
/********************************** ListBox **********************************/
select {
background : var(--window);
border : 1px solid var(--control-shadow);
color : var(--window-text);
font-family: var(--font-dialog);
font-size : var(--font-size);
line-height: var(--font-size);
padding : 1px;
}
/********************************** MenuBar **********************************/ /********************************** MenuBar **********************************/
[role="menubar"] { [role="menubar"] {
@ -230,8 +244,10 @@ input[type="text"] {
background : var(--window); background : var(--window);
border : 1px solid var(--control-shadow); border : 1px solid var(--control-shadow);
color : var(--window-text); color : var(--window-text);
font-family: var(--font-dialog);
font-size : var(--font-size); font-size : var(--font-size);
line-height: var(--font-size); line-height: var(--font-size);
padding : 1px;
} }
@ -418,7 +434,9 @@ input[type="text"] {
[role="dialog"][window="cpu"] [name="wrap-registers"] input[type="text"] { [role="dialog"][window="cpu"] [name="wrap-registers"] input[type="text"] {
border : none; border : none;
font-family : var(--font-hex); font-family : var(--font-hex);
height : var(--font-size);
margin-right: 1px; margin-right: 1px;
padding : 0;
text-align : right; text-align : right;
width : 58px; width : 58px;
} }
@ -474,3 +492,10 @@ input[type="text"] {
border-color: var(--control-shadow); border-color: var(--control-shadow);
color : var(--window-text); color : var(--window-text);
} }
[role="dialog"][window="cpu"] [name="expansion"]
input[type="text"][aria-disabled="true"],
[role="dialog"][window="cpu"] [name="expansion"]
[aria-disabled="true"] [name="check"]{
cursor: not-allowed !important;
}

234
app/toolkit/ListBox.js Normal file
View File

@ -0,0 +1,234 @@
"use strict";
// Multi-item list picker
Toolkit.ListBox = class ListBox extends Toolkit.Component {
// Object constructor
constructor(application, options) {
super(application, "select", options);
options = options || {};
// Configure instance fields
this.changeListeners = [];
this.dropDown = true;
this.enabled = "enabled" in options ? !!options.enabled : true;
this.items = [];
this.name = options.name || "";
// Configure element
this.element.addEventListener("input", e=>this.onchange(e));
// Configure properties
this.setDropDown(this.dropDown);
this.setEnabled (this.enabled );
this.setName (this.name );
if ("items" in options)
this.add(options.items);
this.application.addComponent(this);
}
///////////////////////////// Public Methods //////////////////////////////
// Add one or more items to the list box
add(items, offset, count) {
// Configure arguments
if (!Array.isArray(items))
items = [ items ];
offset = offset || 0;
if (offset < 0 || offset >= items.length)
return;
count = count || items.length - offset;
if (count < 1)
return;
count = Math.min(count, items.length - offset)
// Add the items to the list
for (let x = 0; x < count; x++) {
let item = items[offset + x];
let option = new Toolkit.ListBox.Option(this.application, item);
this.items.push(option);
this.element.appendChild(option.element);
}
}
// Add a callback for chabge events
addChangeListener(listener) {
if (this.changeListeners.indexOf(listener) == -1)
this.changeListeners.push(listener);
}
// Remove all items from the list
clear() {
for (let item of this.items)
this.remove(item);
this.items.splice(0, this.items.length);
}
// Request focus on the appropriate element
focus() {
this.element.focus();
}
// Retrieve the component's accessible name
getName() {
return this.name;
}
// Retrieve the index of the currently selected item
getSelectedIndex() {
return this.element.selectedIndex;
}
// Retrieve the currently selected item
getSelectedItem() {
let index = this.element.selectedIndex;
return index == -1 ? null : this.items[index];
}
// Retrieve the value of the currently selected item
getValue() {
let item = this.getSelectedItem();
return item == null ? null : item.getValue();
}
// Determine whether the component is a drop-down list
isDropDown() {
return this.dropDown;
}
// Determine whether the component is enabled
isEnabled() {
return this.enabled;
}
// Remove an item from the list
remove(item, delocalize) {
let index = this.items.indexOf(item);
// Error checking
if (index == -1)
return;
// Remove the element
item.element.remove();
this.items.splice(index, 1);
// De-localize the element
if (delocalize === undefined || delocalize)
item.application.removeComponent(item);
}
// Specify whether the component is a drop-down list
setDropDown(dropDown) {
// Not yet implemented
}
// Specify whether the component is enabled
setEnabled(enabled) {
this.enabled = enabled = !!enabled;
this.element.setAttribute("aria-disabled", !enabled);
}
// Specify the component's accessible name
setName(name) {
this.name = name || "";
this.localize();
}
// Specify the index of the selected item
setSelectedIndex(index) {
if (typeof index != "number")
return element.selectedIndex;
index = Math.max(Math.min(Math.trunc(index), this.items.length-1), -1);
this.element.selectedIndex = index;
return index;
}
///////////////////////////// Package Methods /////////////////////////////
// Update display text with localized strings
localize() {
let name = this.name;
if (this.application)
name = this.application.translate(name, this);
this.element.setAttribute("aria-label", name);
}
///////////////////////////// Private Methods /////////////////////////////
// Selection changed event handler
onchange(e) {
if (!this.enabled)
return;
for (let listener of this.changeListeners)
listener(e);
}
};
// List box item
Toolkit.ListBox.Option = class Option extends Toolkit.Component {
// Object constructor
constructor(application, options) {
super(application, "option", options);
options = options || {};
// Configure instance fields
this.localized = "localized" in options ? !!options.localized : true;
this.text = options.text || "";
this.value = options.value || null;
// Configure properties
this.setText (this.text );
this.setValue(this.value);
if (this.localized)
this.application.addComponent(this);
}
///////////////////////////// Public Methods //////////////////////////////
// Retrieve the component's display text
getText() {
return this.text;
}
// Retrieve the component's value
getValue() {
return this.value;
}
// Specify the component's display text
setText(text) {
this.text = text || "";
this.localize();
}
// Specify the component's value
setValue(value) {
this.value = value;
}
///////////////////////////// Package Methods /////////////////////////////
// Update display text with localized strings
localize() {
let text = this.text;
if (this.localized && this.application)
text = this.application.translate(text, this);
this.element.innerText = text;
}
};

View File

@ -91,6 +91,11 @@ Toolkit.Panel = class Panel extends Toolkit.Component {
return new Toolkit.Label(this.application, options); return new Toolkit.Label(this.application, options);
} }
// Create a ListBox and associate it with the application
newListBox(options) {
return new Toolkit.ListBox(this.application, options);
}
// Create a MenuBar and associate it with the application // Create a MenuBar and associate it with the application
newMenuBar(options) { newMenuBar(options) {
return new Toolkit.MenuBar(this.application, options); return new Toolkit.MenuBar(this.application, options);

View File

@ -218,13 +218,17 @@
// Update the display with current emulation data // Update the display with current emulation data
refresh(clientHeight, lineHeight, registers) { refresh(clientHeight, lineHeight, registers) {
if (!registers) { if (!this.isVisible())
this.debug.core.postMessage({ return;
command: "GetRegisters", if (registers) {
debug : "CPU", this.getRegisters({ registers });
sim : this.debug.sim return;
});
} }
this.debug.core.postMessage({
command: "GetRegisters",
debug : "CPU",
sim : this.debug.sim
});
} }

View File

@ -106,7 +106,7 @@ globalThis.MemoryWindow = class MemoryWindow extends Toolkit.Window {
for ( for (
let x = 0, address = this.address, offset = 0; let x = 0, address = this.address, offset = 0;
x < this.rows.length && offset < bytes.length; x < this.rows.length && offset < bytes.length;
x++, address = (address + 16 & 0xFFFFFFFF) >>> 0, offset += 16 x++, address = (address + 16 & 0xFFFFFFF0) >>> 0, offset += 16
) this.rows[x].update(address, bytes, offset); ) this.rows[x].update(address, bytes, offset);
} }
@ -155,21 +155,21 @@ globalThis.MemoryWindow = class MemoryWindow extends Toolkit.Window {
// Processing by key // Processing by key
else switch (e.key) { else switch (e.key) {
case "ArrowDown": case "ArrowDown":
this.address = (this.address + 16 & 0xFFFFFFFF) >>> 0; this.address = (this.address + 16 & 0xFFFFFFF0) >>> 0;
this.refresh(); this.refresh();
break; break;
case "ArrowUp": case "ArrowUp":
this.address = (this.address - 16 & 0xFFFFFFFF) >>> 0; this.address = (this.address - 16 & 0xFFFFFFF0) >>> 0;
this.refresh(); this.refresh();
break; break;
case "PageUp": case "PageUp":
this.address = (this.address - 16 * this.lines(true) & this.address = (this.address - 16 * this.lines(true) &
0xFFFFFFFF) >>> 0; 0xFFFFFFF0) >>> 0;
this.refresh(); this.refresh();
break; break;
case "PageDown": case "PageDown":
this.address = (this.address + 16 * this.lines(true) & this.address = (this.address + 16 * this.lines(true) &
0xFFFFFFFF) >>> 0; 0xFFFFFFF0) >>> 0;
this.refresh(); this.refresh();
break; break;
default: return super.onkeydown(e); default: return super.onkeydown(e);
@ -193,13 +193,13 @@ globalThis.MemoryWindow = class MemoryWindow extends Toolkit.Window {
e.stopPropagation(); e.stopPropagation();
// Specify the new address // Specify the new address
this.address = (this.address + sign * mag * 16 & 0xFFFFFFFF) >>> 0; this.address = (this.address + sign * mag * 16 & 0xFFFFFFF0) >>> 0;
this.refresh(null, lineHeight); this.refresh(null, lineHeight);
} }
// Move to a new address positioned at a particular row of output // Move to a new address positioned at a particular row of output
seek(address, index) { seek(address, index) {
this.address = (address - (index || 0) * 16 & 0xFFFFFFFF) >>> 0; this.address = (address - (index || 0) * 16 & 0xFFFFFFF0) >>> 0;
} }
}; };

View File

@ -312,8 +312,7 @@
localized: true, localized: true,
text : "{cpu.pcFrom}" text : "{cpu.pcFrom}"
})); }));
lbl.element.setAttribute("name", "indent"); this.txtFrom = this.expansion.add(this.newTextBox({ enabled: false }));
this.txtFrom = this.expansion.add(this.newTextBox());
this.txtFrom.element.setAttribute("name", "value"); this.txtFrom.element.setAttribute("name", "value");
// To text box // To text box
@ -321,8 +320,7 @@
localized: true, localized: true,
text : "{cpu.pcTo}" text : "{cpu.pcTo}"
})); }));
lbl.element.setAttribute("name", "indent"); this.txtTo = this.expansion.add(this.newTextBox({ enabled: false }));
this.txtTo = this.expansion.add(this.newTextBox());
this.txtTo.element.setAttribute("name", "value"); this.txtTo.element.setAttribute("name", "value");
} }