Handle renaming ports for subgraph portal node

src/graphEditor/nodes/CustomAudio/Subgraph/PortListItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import EditableInstanceName from 'src/midiEditor/EditableInstanceName.svelte';
   import type { MIDINode } from 'src/patchNetwork/midiNode';
   import { formatConnectableType, type ConnectableType } from 'src/patchNetwork/patchNetwork';
 
@@ -16,7 +17,9 @@
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div role="button" on:click={onDelete} tabindex="0">×</div>
   </div>
-  <div class="port-name">{name}</div>
+  <div class="port-name">
+    <EditableInstanceName left={0} {name} setName={onRename} --position="relative" />
+  </div>
   <div class="port-type">{formatConnectableType(port.type)}</div>
 </div>
 

src/graphEditor/nodes/CustomAudio/Subgraph/SubgraphPortalNode.ts

@@ -10,7 +10,7 @@ import type {
 import { Map as ImmMap } from 'immutable';
 import { getEngine } from 'src/util';
 import type { LGraphNode } from 'litegraph.js';
-import { getState } from 'src/redux';
+import { actionCreators, dispatch, getState } from 'src/redux';
 import DummyNode from 'src/graphEditor/nodes/DummyNode';
 import { PlaceholderOutput } from 'src/controlPanel/PlaceholderOutput';
 import { get, writable, type Writable } from 'svelte/store';
@@ -85,15 +85,8 @@ export class SubgraphPortalNode implements ForeignNode {
           });
           updateConnectables(this.vcId, this.buildConnectables());
         },
-        renamePort: (ports: Writable<PortMap>, oldName: string, newName: string) => {
-          ports.update(ports => {
-            const newPorts = { ...ports };
-            newPorts[newName] = newPorts[oldName];
-            delete newPorts[oldName];
-            return newPorts;
-          });
-          updateConnectables(this.vcId, this.buildConnectables());
-        },
+        renamePort: (side: 'input' | 'output', oldName: string, newName: string) =>
+          void this.renamePort(side, oldName, newName),
       }),
     });
     this.cleanupSmallView = mkSvelteContainerCleanupHelper({ preserveRoot: true });
@@ -108,6 +101,45 @@ export class SubgraphPortalNode implements ForeignNode {
     lgNode.graph?.setDirtyCanvas(true, false);
   }
 
+  private renamePort = (side: 'input' | 'output', oldName: string, newName: string) => {
+    const ports = side === 'input' ? this.registeredInputs : this.registeredOutputs;
+    if (!get(ports)[oldName]) {
+      return;
+    }
+
+    ports.update(ports => {
+      const newPorts = { ...ports };
+      newPorts[newName] = newPorts[oldName];
+      delete newPorts[oldName];
+      return newPorts;
+    });
+
+    const oldConns = getState().viewContextManager.patchNetwork.connections;
+    updateConnectables(this.vcId, this.buildConnectables());
+
+    // Reconnect any connections to this port that were severed by the rename
+    for (const [tx, rx] of oldConns) {
+      if (side === 'input' && rx.vcId === this.vcId && rx.name === oldName) {
+        const newRx = { ...rx, name: newName };
+        dispatch(actionCreators.viewContextManager.CONNECT(tx, newRx));
+      } else if (side === 'output' && tx.vcId === this.vcId && tx.name === oldName) {
+        const newTx = { ...tx, name: newName };
+        dispatch(actionCreators.viewContextManager.CONNECT(newTx, rx));
+      }
+    }
+
+    // Rename ports on other subgraph portals
+    for (const connectables of getState().viewContextManager.patchNetwork.connectables.values()) {
+      if (connectables.node && connectables.node instanceof SubgraphPortalNode) {
+        if (side === 'input' && connectables.node.txSubgraphID === this.rxSubgraphID) {
+          connectables.node.renamePort('output', oldName, newName);
+        } else if (side === 'output' && connectables.node.rxSubgraphID === this.txSubgraphID) {
+          connectables.node.renamePort('input', oldName, newName);
+        }
+      }
+    }
+  };
+
   public serialize(): SubgraphPortalNodeState {
     return {
       txSubgraphID: this.txSubgraphID,

src/graphEditor/nodes/CustomAudio/Subgraph/SubgraphPortalSmallView.svelte

@@ -5,21 +5,21 @@
 
   export let inputs: Writable<PortMap>;
   export let outputs: Writable<PortMap>;
-  export let renamePort: (ports: Writable<PortMap>, oldName: string, newName: string) => void;
+  export let renamePort: (side: 'input' | 'output', oldName: string, newName: string) => void;
   export let deletePort: (ports: Writable<PortMap>, name: string) => void;
 </script>
 
 <div class="root">
   <PortList
     title="Inputs"
     ports={inputs}
-    renamePort={(oldName, newName) => renamePort(inputs, oldName, newName)}
+    renamePort={(oldName, newName) => renamePort('input', oldName, newName)}
     deletePort={name => deletePort(inputs, name)}
   />
   <PortList
     title="Outputs"
     ports={outputs}
-    renamePort={(oldName, newName) => renamePort(outputs, oldName, newName)}
+    renamePort={(oldName, newName) => renamePort('output', oldName, newName)}
     deletePort={name => deletePort(outputs, name)}
   />
 </div>

src/midiEditor/EditableInstanceName.svelte

@@ -5,6 +5,7 @@
   export let setName: (name: string) => void;
   export let left: number | undefined = undefined;
   export let right: number | undefined = undefined;
+  export let style: string | undefined = undefined;
 
   let isEditingName = false;
   let nameWrapperHovered = false;
@@ -77,13 +78,17 @@
   .name-wrapper {
     margin-left: 4px;
     margin-top: -3px;
-    position: absolute;
+    position: var(--position, absolute);
     user-select: none;
   }
 
   .name-wrapper,
   input[type='text'] {
-    font-family: Hack, Oxygen Mono, Menlo, monospace;
+    font-family:
+      Hack,
+      Oxygen Mono,
+      Menlo,
+      monospace;
     font-size: 13px;
   }