From ad55b657554282dda2befc812b42a06e5935b8e0 Mon Sep 17 00:00:00 2001
From: Rachel Powers <508861+Ryex@users.noreply.github.com>
Date: Tue, 16 Apr 2024 15:54:36 -0700
Subject: [PATCH] stablize device order, fix UI desync when devices are added
 or removed

---
 www/src/ts/virtual_machine/base_device.ts | 17 ++++++++++++++---
 www/src/ts/virtual_machine/device.ts      |  3 ++-
 www/src/ts/virtual_machine/index.ts       |  8 ++++++--
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/www/src/ts/virtual_machine/base_device.ts b/www/src/ts/virtual_machine/base_device.ts
index fd05fd3..3705128 100644
--- a/www/src/ts/virtual_machine/base_device.ts
+++ b/www/src/ts/virtual_machine/base_device.ts
@@ -47,8 +47,18 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
   superClass: T,
 ) => {
   class VMDeviceMixinClass extends superClass {
-    @property({ type: Number }) accessor deviceID: number;
-    @state() accessor device: DeviceRef;
+
+    _deviceID: number;
+    get deviceID() {
+      return this._deviceID;
+    }
+    @property({ type: Number })
+    set deviceID(val: number) {
+      this._deviceID = val;
+      this.updateDevice();
+    }
+
+    device: DeviceRef;
 
     @state() accessor name: string | null = null;
     @state() accessor nameHash: number | null = null;
@@ -69,7 +79,6 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
 
     connectedCallback(): void {
       const root = super.connectedCallback();
-      this.device = window.VM!.devices.get(this.deviceID)!;
       window.VM?.addEventListener(
         "vm-device-modified",
         this._handleDeviceModified.bind(this),
@@ -97,6 +106,8 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
     }
 
     updateDevice() {
+      this.device = window.VM!.devices.get(this.deviceID)!;
+
       const name = this.device.name ?? null;
       if (this.name !== name) {
         this.name = name;
diff --git a/www/src/ts/virtual_machine/device.ts b/www/src/ts/virtual_machine/device.ts
index a1b027f..26f1cd8 100644
--- a/www/src/ts/virtual_machine/device.ts
+++ b/www/src/ts/virtual_machine/device.ts
@@ -416,7 +416,7 @@ export class VMDeviceList extends BaseElement {
 
   constructor() {
     super();
-    this.devices = window.VM!.deviceIds;
+    this.devices = [...window.VM!.deviceIds];
   }
 
   connectedCallback(): void {
@@ -432,6 +432,7 @@ export class VMDeviceList extends BaseElement {
     const ids = e.detail;
     if (!structuralEqual(this.devices, ids)) {
       this.devices = ids;
+      this.devices.sort();
     }
   }
 
diff --git a/www/src/ts/virtual_machine/index.ts b/www/src/ts/virtual_machine/index.ts
index 2cbab64..be3917c 100644
--- a/www/src/ts/virtual_machine/index.ts
+++ b/www/src/ts/virtual_machine/index.ts
@@ -52,7 +52,9 @@ class VirtualMachine extends EventTarget {
   }
 
   get deviceIds() {
-    return Array.from(this.ic10vm.devices);
+    const ids = Array.from(this.ic10vm.devices);
+    ids.sort();
+    return ids;
   }
 
   get ics() {
@@ -113,9 +115,11 @@ class VirtualMachine extends EventTarget {
     }
 
     if (update_flag) {
+      const ids = Array.from(device_ids);
+      ids.sort()
       this.dispatchEvent(
         new CustomEvent("vm-devices-update", {
-          detail: Array.from(device_ids),
+          detail: ids,
         }),
       );
     }