fix: device id change UI event chain fixed; changing the Active IC's ID no longer breaks the UI
This commit is contained in:
@@ -111,60 +111,80 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
|
||||
|
||||
connectedCallback(): void {
|
||||
const root = super.connectedCallback();
|
||||
window.VM.get().then((vm) =>
|
||||
window.VM.get().then((vm) => {
|
||||
vm.addEventListener(
|
||||
"vm-device-modified",
|
||||
this._handleDeviceModified.bind(this),
|
||||
),
|
||||
);
|
||||
window.VM.get().then((vm) =>
|
||||
);
|
||||
vm.addEventListener(
|
||||
"vm-devices-update",
|
||||
this._handleDevicesModified.bind(this),
|
||||
),
|
||||
);
|
||||
);
|
||||
vm.addEventListener(
|
||||
"vm-device-id-change",
|
||||
this._handleDeviceIdChange.bind(this),
|
||||
);
|
||||
});
|
||||
this.updateDevice();
|
||||
return root;
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
window.VM.get().then((vm) =>
|
||||
window.VM.get().then((vm) => {
|
||||
vm.removeEventListener(
|
||||
"vm-device-modified",
|
||||
this._handleDeviceModified.bind(this),
|
||||
),
|
||||
);
|
||||
window.VM.get().then((vm) =>
|
||||
);
|
||||
vm.removeEventListener(
|
||||
"vm-devices-update",
|
||||
this._handleDevicesModified.bind(this),
|
||||
),
|
||||
);
|
||||
);
|
||||
vm.removeEventListener(
|
||||
"vm-device-id-change",
|
||||
this._handleDeviceIdChange.bind(this),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
_handleDeviceModified(e: CustomEvent) {
|
||||
const id = e.detail;
|
||||
const activeIc = window.VM.vm.activeIC;
|
||||
const activeIcId = window.App.app.session.activeIC;
|
||||
if (this.deviceID === id) {
|
||||
this.updateDevice();
|
||||
} else if (id === activeIc.id && this.deviceSubscriptions.includes("active-ic")) {
|
||||
} else if (
|
||||
id === activeIcId &&
|
||||
this.deviceSubscriptions.includes("active-ic")
|
||||
) {
|
||||
this.updateDevice();
|
||||
}
|
||||
}
|
||||
|
||||
_handleDevicesModified(e: CustomEvent<number[]>) {
|
||||
const activeIc = window.VM.vm.activeIC;
|
||||
const activeIcId = window.App.app.session.activeIC;
|
||||
const ids = e.detail;
|
||||
if (ids.includes(this.deviceID)) {
|
||||
this.updateDevice()
|
||||
} else if (ids.includes(activeIc.id) && this.deviceSubscriptions.includes("active-ic")) {
|
||||
this.updateDevice();
|
||||
} else if (
|
||||
ids.includes(activeIcId) &&
|
||||
this.deviceSubscriptions.includes("active-ic")
|
||||
) {
|
||||
this.updateDevice();
|
||||
}
|
||||
}
|
||||
|
||||
_handleDeviceIdChange(e: CustomEvent<{ old: number; new: number }>) {
|
||||
if (this.deviceID === e.detail.old) {
|
||||
this.deviceID = e.detail.new;
|
||||
}
|
||||
}
|
||||
|
||||
updateDevice() {
|
||||
this.device = window.VM.vm.devices.get(this.deviceID)!;
|
||||
|
||||
if (typeof this.device === "undefined") {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const sub of this.deviceSubscriptions) {
|
||||
if (typeof sub === "string") {
|
||||
if (sub == "name") {
|
||||
@@ -220,16 +240,21 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if ( "field" in sub ) {
|
||||
if ("field" in sub) {
|
||||
const fields = this.device.fields;
|
||||
if (this.fields.get(sub.field) !== fields.get(sub.field)) {
|
||||
this.fields = fields;
|
||||
}
|
||||
} else if ( "slot" in sub) {
|
||||
} else if ("slot" in sub) {
|
||||
const slots = this.device.slots;
|
||||
if (typeof this.slots === "undefined" || this.slots.length < sub.slot) {
|
||||
if (
|
||||
typeof this.slots === "undefined" ||
|
||||
this.slots.length < sub.slot
|
||||
) {
|
||||
this.slots = slots;
|
||||
} else if (!structuralEqual(this.slots[sub.slot], slots[sub.slot])) {
|
||||
} else if (
|
||||
!structuralEqual(this.slots[sub.slot], slots[sub.slot])
|
||||
) {
|
||||
this.slots = slots;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -361,7 +361,7 @@ export class VMDeviceCard extends VMDeviceDBMixin(VMDeviceMixin(BaseElement)) {
|
||||
const val = parseIntWithHexOrBinary(input.value);
|
||||
if (!isNaN(val)) {
|
||||
window.VM.get().then((vm) => {
|
||||
if (!vm.changeDeviceId(this.deviceID, val)) {
|
||||
if (!vm.changeDeviceID(this.deviceID, val)) {
|
||||
input.value = this.deviceID.toString();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -22,7 +22,7 @@ export interface ToastMessage {
|
||||
}
|
||||
|
||||
export interface CacheDeviceRef extends DeviceRef {
|
||||
dirty: boolean
|
||||
dirty: boolean;
|
||||
}
|
||||
|
||||
function cachedDeviceRef(ref: DeviceRef) {
|
||||
@@ -43,12 +43,12 @@ function cachedDeviceRef(ref: DeviceRef) {
|
||||
},
|
||||
set(target, prop, value) {
|
||||
if (prop === "dirty") {
|
||||
slotsDirty = value
|
||||
slotsDirty = value;
|
||||
return true;
|
||||
}
|
||||
return Reflect.set(target, prop, value)
|
||||
}
|
||||
}) as CacheDeviceRef
|
||||
return Reflect.set(target, prop, value);
|
||||
},
|
||||
}) as CacheDeviceRef;
|
||||
}
|
||||
|
||||
class VirtualMachine extends EventTarget {
|
||||
@@ -264,13 +264,22 @@ class VirtualMachine extends EventTarget {
|
||||
this.dispatchEvent(new CustomEvent("vm-message", { detail: message }));
|
||||
}
|
||||
|
||||
changeDeviceId(old_id: number, new_id: number): boolean {
|
||||
changeDeviceID(oldID: number, newID: number): boolean {
|
||||
try {
|
||||
this.ic10vm.changeDeviceId(old_id, new_id);
|
||||
this.updateDevices();
|
||||
if (this.app.session.activeIC === old_id) {
|
||||
this.app.session.activeIC = new_id;
|
||||
this.ic10vm.changeDeviceId(oldID, newID);
|
||||
if (this.app.session.activeIC === oldID) {
|
||||
this.app.session.activeIC = newID;
|
||||
}
|
||||
this.updateDevices();
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("vm-device-id-change", {
|
||||
detail: {
|
||||
old: oldID,
|
||||
new: newID,
|
||||
},
|
||||
}),
|
||||
);
|
||||
this.app.session.changeID(oldID, newID);
|
||||
return true;
|
||||
} catch (err) {
|
||||
this.handleVmError(err);
|
||||
@@ -430,7 +439,11 @@ class VirtualMachine extends EventTarget {
|
||||
}
|
||||
}
|
||||
|
||||
setDeviceSlotOccupant(id: number, index: number, template: SlotOccupantTemplate): boolean {
|
||||
setDeviceSlotOccupant(
|
||||
id: number,
|
||||
index: number,
|
||||
template: SlotOccupantTemplate,
|
||||
): boolean {
|
||||
const device = this._devices.get(id);
|
||||
if (typeof device !== "undefined") {
|
||||
try {
|
||||
|
||||
Reference in New Issue
Block a user