More work on subgraph portal UI

 * Allow renaming subgraphs

engine/engine/src/lib.rs

@@ -110,6 +110,12 @@ pub fn set_active_subgraph_id(subgraph_id: &str) {
   vcm.set_active_subgraph(uuid, false);
 }
 
+#[wasm_bindgen]
+pub fn rename_subgraph(subgraph_id: &str, new_name: String) {
+  let uuid = Uuid::from_str(subgraph_id).expect("Invalid UUID string passed to `rename_subgraph`!");
+  get_vcm().rename_subgraph(uuid, new_name);
+}
+
 #[wasm_bindgen]
 pub fn undo_view_change() { get_vcm().undo_view_change(); }
 

engine/engine/src/view_context/manager.rs

@@ -431,6 +431,18 @@ impl ViewContextManager {
     );
   }
 
+  pub fn rename_subgraph(&mut self, subgraph_id: Uuid, new_name: String) {
+    let subgraph = self
+      .subgraphs_by_id
+      .get_mut(&subgraph_id)
+      .expect("Tried to rename a subgraph that doesn't exist.  This should never happen.");
+    subgraph.name = new_name;
+    js::set_subgraphs(
+      &self.active_subgraph_id.to_string(),
+      &serde_json::to_string(&self.subgraphs_by_id).unwrap(),
+    );
+  }
+
   fn set_view(&mut self, subgraph_id: Uuid, vc_id: Uuid) -> Result<(), ()> {
     if self.subgraphs_by_id.contains_key(&subgraph_id)
       && self.contexts.iter().any(|vc| vc.id == vc_id)

src/graphEditor/nodes/CustomAudio/FMSynthFx/FMSynthFxNode.ts

@@ -71,6 +71,10 @@ export class FMSynthFxNode implements ForeignNode {
       getProps: () => ({
         store: this.store,
         onChange: (ix: number, newState: Partial<Effect> | null) => this.handleChange(ix, newState),
+        commitAll: () => {
+          const state = get(this.store);
+          state.effects.forEach((effect, effectIx) => this.commitEffect(effectIx, effect));
+        },
       }),
     });
 

src/graphEditor/nodes/CustomAudio/FMSynthFx/FMSynthFxSmallView.svelte

@@ -6,16 +6,17 @@
   import type { AdsrParams } from 'src/graphEditor/nodes/CustomAudio/FMSynth';
   import type { FMSynthFxState } from 'src/graphEditor/nodes/CustomAudio/FMSynthFx/FMSynthFxNode';
   import type { Effect } from 'src/fmSynth/Effect';
-  import { UnreachableError } from 'src/util';
 
   export let store: Writable<FMSynthFxState>;
   export let onChange: (ix: number, newState: Partial<Effect> | null) => void;
+  export let commitAll: () => void;
 
   let state: (Effect | null)[] = $store.effects;
   $: state = $store.effects;
 
-  const setOperatorEffects = (newOperatorEffects: (Effect | null)[]) => {
-    throw new UnreachableError('Should never set operator-specific fx in FMSynthFxSmallView');
+  const setOperatorEffects = (newFx: (Effect | null)[]) => {
+    store.set({ effects: newFx });
+    commitAll();
   };
   let adsrs: AdsrParams[] = []; // TODO
   let onAdsrChange: AdsrChangeHandler = (adsrIx: number, newParams: AdsrParams) => {

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

@@ -160,6 +160,7 @@ export class SubgraphPortalNode implements ForeignNode {
   public registeredOutputs: Writable<PortMap> = writable({});
   private placeholderInput: PlaceholderInput;
   private placeholderOutput: PlaceholderOutput;
+  public lgNode?: LGraphNode;
 
   static typeName = 'Subgraph Portal';
   static manuallyCreatable = false;
@@ -212,6 +213,14 @@ export class SubgraphPortalNode implements ForeignNode {
         },
         renamePort: (side: 'input' | 'output', oldName: string, newName: string) =>
           void this.renamePort(side, oldName, newName),
+        setSubgraphName: (newSubgraphName: string) => {
+          getEngine()!.rename_subgraph(this.rxSubgraphID, newSubgraphName);
+          if (this.lgNode) {
+            this.lgNode.title = newSubgraphName;
+            this.lgNode.graph?.setDirtyCanvas(true, false);
+          }
+        },
+        rxSubgraphID: this.rxSubgraphID,
       }),
     });
     this.cleanupSmallView = mkSvelteContainerCleanupHelper({ preserveRoot: true });

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

@@ -2,14 +2,32 @@
   import type { PortMap } from 'src/graphEditor/nodes/CustomAudio/Subgraph/SubgraphPortalNode';
   import type { Writable } from 'svelte/store';
   import PortList from './PortList.svelte';
+  import EditableInstanceName from 'src/midiEditor/EditableInstanceName.svelte';
+  import { svelteStoreFromRedux } from 'src/svelteUtils';
 
   export let inputs: Writable<PortMap>;
   export let outputs: Writable<PortMap>;
   export let renamePort: (side: 'input' | 'output', oldName: string, newName: string) => void;
   export let deletePort: (ports: Writable<PortMap>, name: string) => void;
+  export let setSubgraphName: (newName: string) => void;
+  export let rxSubgraphID: string;
+
+  const subgraphName = svelteStoreFromRedux(
+    state => state.viewContextManager.subgraphsByID[rxSubgraphID]?.name
+  );
 </script>
 
 <div class="root">
+  <div class="subgraph-name">
+    <EditableInstanceName
+      left={0}
+      --position="relative"
+      --font-size="18px"
+      --icon-font-size="22px"
+      name={$subgraphName}
+      setName={setSubgraphName}
+    />
+  </div>
   <PortList
     title="Inputs"
     ports={inputs}
@@ -30,4 +48,13 @@
     flex-direction: column;
     flex: 1;
   }
+
+  .subgraph-name {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #333;
+    padding-bottom: 2px;
+    font-weight: bold;
+  }
 </style>

src/midiEditor/EditableInstanceName.svelte

@@ -54,7 +54,7 @@
     class="edit-name"
     style="visibility: {nameWrapperHovered && !isEditingName
       ? 'visible'
-      : 'hidden'}; font-size: 16px;"
+      : 'hidden'}; font-size: var(--icon-font-size, 16px);"
     on:click={e => {
       e.stopPropagation();
       isEditingName = true;
@@ -88,7 +88,7 @@
       Oxygen Mono,
       Menlo,
       monospace;
-    font-size: 13px;
+    font-size: var(--font-size, 13px);
   }
 
   .edit-name {

src/svelteUtils.ts

@@ -1,7 +1,8 @@
 import React, { type JSXElementConstructor, type ReactElement, type RefObject } from 'react';
 import type { Unsubscribe as ReduxUnsubscribe, Store } from 'redux';
-import type { SvelteComponent } from 'svelte';
-import type { Writable } from 'svelte/store';
+import { getState, store, type ReduxStore } from 'src/redux';
+import { onDestroy, type SvelteComponent } from 'svelte';
+import { writable, type Writable } from 'svelte/store';
 
 import type { Subscriber, Unsubscriber, Updater } from 'svelte/store';
 
@@ -157,6 +158,34 @@ export function buildSvelteReduxStoreBridge<State, Slice>(
   return { set, update, subscribe };
 }
 
+/**
+ * Subscribes to a Redux store using the provided `selector` and returns the result as a Svelte store.
+ *
+ * Automatically unsubscribes from the Redux store when the Svelte component is destroyed.
+ *
+ * NOTE: The provided `selector` must remain static.
+ */
+export function svelteStoreFromRedux<Slice>(
+  selector: (state: ReduxStore) => Slice
+): Writable<Slice> {
+  let lastSlice = selector(getState());
+  const svelteStore = writable(lastSlice);
+
+  const unsub = store.subscribe(() => {
+    const slice = selector(getState());
+    if (slice === lastSlice) {
+      return;
+    }
+    lastSlice = slice;
+
+    svelteStore.set(slice);
+  });
+
+  onDestroy(() => void unsub());
+
+  return svelteStore;
+}
+
 export type SveltePropTypesOf<Comp> =
   Comp extends SvelteComponent<infer Props>
     ? Props