refactor: simplify reactivity in FluidCell

Workaround required for stores Writable no longer required for $state driven app wide state
mgreminger · Jan 2, 2025 · 23872c8 · 23872c8
1 parent 5d686d1
commit 23872c8
Showing 1 changed file with 6 additions and 65 deletions.
diff --git a/src/FluidCell.svelte b/src/FluidCell.svelte
@@ -33,50 +33,14 @@
     mathCellChanged
   }: Props = $props();
 
-  let fluidConfig = $state({
-    get fluid() {
-      return (fluidCell.useSheetFluid ? appState.config.fluidConfig : fluidCell.fluidConfig).fluid;
-    },
-
-    get incompMixConc() {
-      return (fluidCell.useSheetFluid ? appState.config.fluidConfig : fluidCell.fluidConfig).incompMixConc;
-    },
-
-    get customMixture() {
-      return (fluidCell.useSheetFluid ? appState.config.fluidConfig : fluidCell.fluidConfig).customMixture;
-    },
-
-    set fluid(newValue: string) {
-      if (fluidCell.useSheetFluid) {
-        appState.config.fluidConfig.fluid = newValue;
-      } else {
-        fluidCell.fluidConfig.fluid = newValue;
-      }
-    },
-
-    set incompMixConc(newValue: number) {
-      if (fluidCell.useSheetFluid) {
-        appState.config.fluidConfig.incompMixConc = newValue;
-      } else {
-        fluidCell.fluidConfig.incompMixConc = newValue;
-      }
-    },
-
-    set customMixture(newValue: {fluid: string, moleFraction: number}[]) {
-      if (fluidCell.useSheetFluid) {
-        appState.config.fluidConfig.customMixture = newValue;
-      } else {
-        fluidCell.fluidConfig.customMixture = newValue;
-      }
-    }
-  });
-
   let containerDiv: HTMLDivElement;
   let fluidGroups: {category: string, keys: string[]}[] = $state([]);
   let mixtureComponents: [string, string][] = $state([]);
   let outputMenuItems: {category: string, items: [string, string][]}[] = $state([]);
   let inputMenuItems: {category: string, items: [string, string][]}[] = $state([]);
 
+  let fluidConfig = $derived(fluidCell.useSheetFluid ? appState.config.fluidConfig : fluidCell.fluidConfig);
+
   export function getMarkdown() {
     return "";
   }
@@ -123,29 +87,6 @@
     handleUpdate();
   }
 
-  function handleMoleFractionUpdate(event: Event, index: number) {
-    const value = Number((event.target as HTMLInputElement).value);
-  
-    if (!isNaN(value)) {
-      const customMixture = fluidConfig.customMixture;
-
-      customMixture[index].moleFraction = value;
-      fluidConfig.customMixture = structuredClone($state.snapshot(customMixture)); // forces reactivity
-
-      console.log('updating');
-      handleUpdate();
-    }
-  }
-
-  function handleFluidComponentUpdate(event: Event, index: number) {
-    const customMixture = fluidConfig.customMixture;
-
-    customMixture[index].fluid = (event.target as HTMLInputElement).value;
-    fluidConfig.customMixture = structuredClone($state.snapshot(customMixture)); // forces reactivity
-
-    handleUpdate();
-  }
-
   function getFluidGroups() {
     fluidGroups = [];
     mixtureComponents = [];
@@ -453,8 +394,8 @@
           </label>
           <select
             id={`fluid-component-selector-${index}-${i}`}
-            value={component.fluid}
-            onchange={(e) => handleFluidComponentUpdate(e, i)}
+            bind:value={component.fluid}
+            onchange={handleUpdate}
           >
             {#each mixtureComponents as [key, description] (key)}
               <option value={key}>
@@ -471,8 +412,8 @@
           <div class="row">
             <input
               id={`fluid-component-mole-fraction-${index}-${i}`}
-              value={component.moleFraction}
-              oninput={(e) => handleMoleFractionUpdate(e, i)}
+              bind:value={component.moleFraction}
+              oninput={handleUpdate}
               min="0.0"
               max="1.0"
               step="0.01"