cfa240c579
- switch to BTreeMap for consistant ordering of fields (less UI updates) - cache calls to expensive getters in the vm via witha Proxy on DeviceRefs - have DeviceMixin explicitly subscribe to device property changes to limit updates - split fields into seperate componate to avoid rerender of other components - speedup ic10emu_wasm DeviceRef::get_slots by only calling serde once. Signed-off-by: Rachel Powers <508861+Ryex@users.noreply.github.com>
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import { html, css } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
import { BaseElement, defaultCss } from "components";
|
|
import { VMDeviceDBMixin, VMDeviceMixin } from "virtual_machine/base_device";
|
|
import { displayNumber, parseNumber } from "utils";
|
|
import type { LogicType } from "ic10emu_wasm";
|
|
import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js";
|
|
|
|
@customElement("vm-device-fields")
|
|
export class VMDeviceSlot extends VMDeviceMixin(VMDeviceDBMixin(BaseElement)) {
|
|
constructor() {
|
|
super();
|
|
this.subscribe("fields");
|
|
}
|
|
|
|
render() {
|
|
const fields = Array.from(this.fields.entries());
|
|
const inputIdBase = `vmDeviceCard${this.deviceID}Field`;
|
|
return html`
|
|
${fields.map(([name, field], _index, _fields) => {
|
|
return html` <sl-input id="${inputIdBase}${name}" key="${name}" value="${displayNumber(field.value)}" size="small"
|
|
@sl-change=${this._handleChangeField}>
|
|
<span slot="prefix">${name}</span>
|
|
<sl-copy-button slot="suffix" from="${inputIdBase}${name}.value"></sl-copy-button>
|
|
<span slot="suffix">${field.field_type}</span>
|
|
</sl-input>`;
|
|
})}
|
|
`;
|
|
}
|
|
|
|
_handleChangeField(e: CustomEvent) {
|
|
const input = e.target as SlInput;
|
|
const field = input.getAttribute("key")! as LogicType;
|
|
const val = parseNumber(input.value);
|
|
window.VM.get().then((vm) => {
|
|
if (!vm.setDeviceField(this.deviceID, field, val, true)) {
|
|
input.value = this.fields.get(field).value.toString();
|
|
}
|
|
this.updateDevice();
|
|
});
|
|
}
|
|
}
|