nmie works from Vuex store

guiapp/src/App.vue

@@ -3,6 +3,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { useStore } from 'src/store'
 
 
 // const fs = require("fs");
@@ -57,6 +58,11 @@ import { defineComponent } from 'vue';
 // });
 
 export default defineComponent({
-  name: 'App'
+  name: 'App',
+  setup(){
+    const $store = useStore()
+    $store.dispatch('simulationSetup/loadScattnlay')
+
+  }
 })
 </script>

guiapp/src/components/RunSimulationSpectrum.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="row items-baseline">
+    <div class="col-xs-12 col-sm-auto text-weight-bold text-center q-px-md q-py-sm">
+        <q-btn :loading="isRunning"
+               color="primary"
+               no-caps
+               label="Run simulation"
+               @click="runSimulation"
+      />
+    </div>
+    <div class="col-xs-grow col-sm q-px-xs">
+      <div class="row justify-xs-center justify-sm-start items-baseline">
+
+        <div class="col-auto">
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  computed,
+  } from 'vue'
+import { useStore } from 'src/store'
+import { flexRowTitleStyle } from 'components/utils'
+
+export default defineComponent({
+  name: 'RunSimulationSpectrum',
+
+  setup() {
+    const $store = useStore()
+
+    const isRunning = ref(false)
+
+    const numberOfModesToPlot = computed({
+      get: () => $store.state.simulationSetup.gui.numberOfModesToPlot,
+      set: val => {
+        const intVal = parseInt(val.toString())
+        if (!isNaN(intVal)) $store.commit('simulationSetup/setNumberOfModesToPlot', intVal)
+      }
+    })
+
+    function runSimulation() {
+      isRunning.value = true
+// simulate a delay
+      setTimeout(() => {
+        // we're done, we reset loading state
+        isRunning.value = false
+      }, 3000)
+    }
+
+    return { flexRowTitleStyle,
+      numberOfModesToPlot, runSimulation,
+      isRunning
+      }
+  },
+})
+</script>

guiapp/src/nmiejs.d.ts

@@ -1,4 +1,4 @@
-declare function nmiejs(): Promise<nmieModule>;
+export default function nmiejs(): Promise<nmieModule>;
 
 
 declare interface nmieModule {
@@ -6,7 +6,7 @@ declare interface nmieModule {
 }
 
 
-declare class nmie_class {
+export class nmie_class {
     constructor(path?: string);
     SetWavelength(wavelength: number): void;
     AddTargetLayerReIm(layer_width: number,
@@ -27,5 +27,3 @@ declare class nmie_class {
     GetQext(): number;
 }
 
-
-export = nmiejs;

guiapp/src/store/simulation-setup/actions.ts

@@ -1,10 +1,34 @@
 import { ActionTree } from 'vuex';
 import { StateInterface } from '../index';
 import { simulationSetupStateInterface } from './state';
+import nmiejs from 'src/nmiejs.js';
+
 
 const actions: ActionTree<simulationSetupStateInterface, StateInterface> = {
-  someAction (/* context */) {
-    // your code
+  async loadScattnlay ({commit,state}/* context */) {
+    // Test nmiejs if working
+    const module = await nmiejs()
+    const nmie = new module.nmie()
+    commit('setNmie', nmie)
+    if (state.nmie) {
+      state.nmie.ClearTarget()
+      const R = 100.0
+      const reN = 4.0
+      const imN = 0.01
+      state.nmie.AddTargetLayerReIm(R, reN, imN)
+      state.nmie.SetModeNmaxAndType(-1, -1)
+      const WL = 800
+      state.nmie.SetWavelength(WL)
+      state.nmie.RunMieCalculation()
+      console.log(state.nmie.GetQsca())
+      // outer_arc_points, radius_points, from_Rho, to_Rho,
+      // from_Theta, to_Theta, from_Phi, to_Phi, isIgnoreAvailableNmax
+      state.nmie.RunFieldCalculationPolar(2, 2,
+          0.1, 1.5, 0, 3.1415, 0, 3.1415,
+          0)
+      console.log('Field Eabs:', state.nmie.GetFieldEabs())
+    }
+
   }
 };
 

guiapp/src/store/simulation-setup/mutations.ts

@@ -1,21 +1,28 @@
 import { MutationTree } from 'vuex';
 import { simulationSetupStateInterface as sssi, simulationSetup, layer } from './state';
 import { cloneDeep } from 'lodash'
+import { markRaw} from 'vue'
 
 const mutation: MutationTree<sssi> = {
-  setGuiState (state: sssi,
-               newVal: simulationSetup) {
-    state.gui = cloneDeep(newVal)
+  setNmie (state: sssi,
+           newVal: import('src/nmiejs').nmie_class) {
+    state.nmie = markRaw(newVal)
   },
+
   setCurrentState (state: sssi,
-               newVal: simulationSetup) {
+                   newVal: simulationSetup) {
     state.current = cloneDeep(newVal)
   },
+
+  // Mutations for simulation setup as represented\set in GUI
+  setGuiState (state: sssi,
+               newVal: simulationSetup) {
+    state.gui = cloneDeep(newVal)
+  },
   setLayers    (state: sssi,
                 newVal: layer[]) {
     state.gui.layers = cloneDeep(newVal)
   },
-
   setHostIndex (state: sssi, val: number) {state.gui.hostIndex = val},
   setFromWL    (state: sssi, val: number) {state.gui.fromWL    = val},
   setToWL      (state: sssi, val: number) {state.gui.toWL      = val},

guiapp/src/store/simulation-setup/state.ts

@@ -1,6 +1,5 @@
 import { cloneDeep } from 'lodash'
 import Spline from 'cubic-spline-ts'
-import nmiejs from 'src/nmiejs.js';
 
 export interface layer {
   layerWidth: number
@@ -22,6 +21,7 @@ export interface simulationSetupStateInterface {
   library: Map<string,simulationSetup>
   gui: simulationSetup
   current: simulationSetup
+  nmie: import('src/nmiejs').nmie_class|undefined
 }
 
 function setupFactory(hostIndex = 1,
@@ -42,36 +42,17 @@ function setupFactory(hostIndex = 1,
 }
 
 function state(): simulationSetupStateInterface {
-  // Test nmiejs if working
-  void (async () => {
-    const module = await nmiejs();
-    const nmie = new module.nmie();
-    nmie.ClearTarget();
-    const R = 100.0;
-    const reN = 4.0;
-    const imN = 0.01;
-    nmie.AddTargetLayerReIm(R, reN, imN)
-    nmie.SetModeNmaxAndType(-1, -1);
-    const WL = 800;
-    nmie.SetWavelength(WL);
-    nmie.RunMieCalculation();
-    console.log(nmie.GetQsca());
-    // outer_arc_points, radius_points, from_Rho, to_Rho,
-    // from_Theta, to_Theta, from_Phi, to_Phi, isIgnoreAvailableNmax
-    nmie.RunFieldCalculationPolar(2, 2,
-        0.1, 1.5, 0, 3.1415, 0, 3.1415,
-        0);
-    console.log('Field Eabs:', nmie.GetFieldEabs());
-  })();
 
   const gui = setupFactory()
   const current = cloneDeep(gui)
   const library = new Map<string,simulationSetup>()
   library.set('default', cloneDeep(gui))
+  const nmie = undefined
   return {
     library,
     gui, // simulation setup config as shown in GUI
-    current // simulation setup used for the latest simulation
+    current, // simulation setup used for the latest simulation
+    nmie
   }
 };