refactor zoom refine

guiapp/quasar.conf.js

@@ -19,7 +19,7 @@ module.exports = configure(function (ctx) {
           enabled: true,
           files: './src/**/*.{ts,tsx,js,jsx,vue}',
         },
-      }
+      },
     },
 
     // https://v2.quasar.dev/quasar-cli/prefetch-feature
@@ -28,13 +28,10 @@ module.exports = configure(function (ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli/boot-files
-    boot: [
-    ],
+    boot: [],
 
     // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
-    css: [
-      'app.scss'
-    ],
+    css: ['app.scss'],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
@@ -53,17 +50,16 @@ module.exports = configure(function (ctx) {
 
     // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
-      publicPath: process.env.NODE_ENV === 'development'
+      // publicPath: '/',
+      publicPath:
+        process.env.NODE_ENV === 'development'
           ? '/'
-          : '/themes/custom/physics/mie-next/', //deploy path in Drupal setup at physics.ifmo.ru
-          // : '/themes/custom/physics/mie/', //deploy path in Drupal setup at physics.ifmo.ru
+          : '/themes/custom/physics/mie-next/', // deploy path in Drupal setup at physics.ifmo.ru
 
       env: {
         // copy publicPath from above build.publicPath to make it available from inside of the app.
-        publicPath: ctx.dev
-            ? '/'
-            : '/themes/custom/physics/mie-next/' //deploy path in Drupal setup at physics.ifmo.ru
-            // : '/themes/custom/physics/mie/' //deploy path in Drupal setup at physics.ifmo.ru
+        // publicPath: '/',
+        publicPath: ctx.dev ? '/' : '/themes/custom/physics/mie-next/', //  deploy path in Drupal setup at physics.ifmo.ru
       },
       // extendWebpack (cfg, { isServer, isClient }) {
       //   cfg.module.rules.push({
@@ -93,17 +89,17 @@ module.exports = configure(function (ctx) {
 
       // https://v2.quasar.dev/quasar-cli/handling-webpack
       // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
-      chainWebpack (chain) {
-        const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
-        chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
-      }
+      chainWebpack(chain) {
+        const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin');
+        chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin);
+      },
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
     devServer: {
       https: false,
       port: 8080,
-      open: true // opens browser window automatically
+      open: true, // opens browser window automatically
     },
 
     // https://v2.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
@@ -121,12 +117,12 @@ module.exports = configure(function (ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: [
-        'Loading','Notify'
-      ],
+      plugins: ['Loading', 'Notify'],
       config: {
-        loading: { /* look at QuasarConfOptions from the API card */ }
-      }
+        loading: {
+          /* look at QuasarConfOptions from the API card */
+        },
+      },
     },
 
     // animations: 'all', // --- includes all animations
@@ -141,19 +137,19 @@ module.exports = configure(function (ctx) {
       // manualPostHydrationTrigger: true,
 
       prodPort: 3000, // The default port that the production server should use
-                      // (gets superseded if process.env.PORT is specified at runtime)
+      // (gets superseded if process.env.PORT is specified at runtime)
 
       maxAge: 1000 * 60 * 60 * 24 * 30,
-        // Tell browser when a file from the server should expire from cache (in ms)
+      // Tell browser when a file from the server should expire from cache (in ms)
 
-      chainWebpackWebserver (/* chain */) {
+      chainWebpackWebserver(/* chain */) {
         //
       },
 
       middlewares: [
         ctx.prod ? 'compression' : '',
-        'render' // keep this as last one
-      ]
+        'render', // keep this as last one
+      ],
     },
 
     // https://v2.quasar.dev/quasar-cli/developing-pwa/configuring-pwa
@@ -163,7 +159,7 @@ module.exports = configure(function (ctx) {
 
       // for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
       // if using workbox in InjectManifest mode
-      chainWebpackCustomSW (/* chain */) {
+      chainWebpackCustomSW(/* chain */) {
         //
       },
 
@@ -179,30 +175,30 @@ module.exports = configure(function (ctx) {
           {
             src: 'icons/icon-128x128.png',
             sizes: '128x128',
-            type: 'image/png'
+            type: 'image/png',
           },
           {
             src: 'icons/icon-192x192.png',
             sizes: '192x192',
-            type: 'image/png'
+            type: 'image/png',
           },
           {
             src: 'icons/icon-256x256.png',
             sizes: '256x256',
-            type: 'image/png'
+            type: 'image/png',
           },
           {
             src: 'icons/icon-384x384.png',
             sizes: '384x384',
-            type: 'image/png'
+            type: 'image/png',
           },
           {
             src: 'icons/icon-512x512.png',
             sizes: '512x512',
-            type: 'image/png'
-          }
-        ]
-      }
+            type: 'image/png',
+          },
+        ],
+      },
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
@@ -212,7 +208,7 @@ module.exports = configure(function (ctx) {
 
     // Full list of options: https://v2.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
     capacitor: {
-      hideSplashscreen: true
+      hideSplashscreen: true,
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
@@ -221,13 +217,11 @@ module.exports = configure(function (ctx) {
 
       packager: {
         // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
-
         // OS X / Mac App Store
         // appBundleId: '',
         // appCategoryType: '',
         // osxSign: '',
         // protocol: 'myapp://path',
-
         // Windows only
         // win32metadata: { ... }
       },
@@ -235,20 +229,20 @@ module.exports = configure(function (ctx) {
       builder: {
         // https://www.electron.build/configuration/configuration
 
-        appId: 'guiapp'
+        appId: 'guiapp',
       },
 
       // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
-      chainWebpack (/* chain */) {
+      chainWebpack(/* chain */) {
         // do something with the Electron main process Webpack cfg
         // extendWebpackMain also available besides this chainWebpackMain
       },
 
       // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
-      chainWebpackPreload (/* chain */) {
+      chainWebpackPreload(/* chain */) {
         // do something with the Electron main process Webpack cfg
         // extendWebpackPreload also available besides this chainWebpackPreload
       },
-    }
-  }
+    },
+  };
 });

guiapp/src/components/nearfield/GetNearFieldRefinedSettings.vue

@@ -92,20 +92,9 @@ export default defineComponent({
         $store.commit('simulationSetup/setNearFieldAtRelativeZ0', val),
     });
 
-    const plotYSideResolution = computed({
-      get: () =>
-        $store.state.simulationSetup.gui.nearFieldSetup.plotYSideResolution,
-      set: (val) =>
-        $store.commit(
-          'simulationSetup/setNearFieldPlotYSideResolution',
-          Math.floor(val)
-        ),
-    });
-
     return {
       isShowingHelpForInputWithUnits,
       flexRowTitleStyle,
-      plotYSideResolution,
       atRelativeX0,
       atRelativeY0,
       atRelativeZ0,

guiapp/src/components/nearfield/GetNearFieldSettings.vue

@@ -72,7 +72,10 @@
         </div>
       </div>
 
-      <div class="row justify-center items-baseline">
+      <div
+        v-if="plotRatioLabel == 'any'"
+        class="row justify-center items-baseline"
+      >
         <div class="col-auto text-center q-py-xs q-pr-md">
           <div :style="flexRowTitleStyle">y-side resolution</div>
         </div>
@@ -82,7 +85,7 @@
               v-model:input-result="plotYSideResolution"
               v-model:is-showing-help="isShowingHelpForInputWithUnits"
               :initial-expression="plotYSideResolution.toString()"
-              :is-info-mode="isFixedRatioNearField"
+              :is-info-mode="plotRatioLabel != 'any'"
               title="points"
               units=""
             />
@@ -144,7 +147,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, watch, ref } from 'vue';
+import { defineComponent, computed, watch } from 'vue';
 import { useStore } from 'src/store';
 import InputWithUnits from 'components/InputWithUnits.vue';
 import { flexRowTitleStyle } from 'components/config';
@@ -176,11 +179,6 @@ export default defineComponent({
         $store.commit('simulationSetup/setNearFieldRelativePlotSize', val),
     });
 
-    const isFixedRatioNearField = computed({
-      get: () => $store.state.guiRuntime.isFixedRatioNearField,
-      set: (val) => $store.commit('guiRuntime/setIsFixedRatioNearField', val),
-    });
-
     // const maxComputeTime = computed({
     //   get: () => $store.state.simulationSetup.gui.nearFieldSetup.maxComputeTime,
     //   set: val => $store.commit('simulationSetup/setNearFieldMaxComputeTime', val)
@@ -207,15 +205,13 @@ export default defineComponent({
         ),
     });
 
-    const plotRatioLabel = ref('any');
-    const plotRatio = ref(1);
-
-    watch(plotRatioLabel, () => {
-      if (plotRatioLabel.value == 'any') isFixedRatioNearField.value = false;
-      else isFixedRatioNearField.value = true;
+    const plotRatioLabel = computed({
+      get: () => $store.state.guiRuntime.plotRatioLabel,
+      set: (val) => $store.commit('guiRuntime/setPlotRatioLabel', val),
     });
-    watch(isFixedRatioNearField, () => {
-      if (!isFixedRatioNearField.value) plotRatioLabel.value = 'any';
+    const plotRatio = computed({
+      get: () => $store.state.guiRuntime.plotRatio,
+      set: (val) => $store.commit('guiRuntime/setPlotRatio', val),
     });
 
     watch(plotRatioLabel, () => {
@@ -237,15 +233,14 @@ export default defineComponent({
           break;
       }
     });
-    watch([plotXSideResolution, plotRatioLabel], () => {
-      if (isFixedRatioNearField.value)
+    watch([plotXSideResolution, plotRatioLabel, plotRatio], () => {
+      if (plotRatioLabel.value != 'any')
         plotYSideResolution.value = plotRatio.value * plotXSideResolution.value;
     });
     return {
       crossSection,
       plotRatioLabel,
       isShowingHelpForInputWithUnits,
-      isFixedRatioNearField,
       flexRowTitleStyle,
       relativePlotSize,
       // maxComputeTime,

guiapp/src/components/nearfield/RunSimulationNearField.vue

@@ -82,7 +82,10 @@ import { computed, defineComponent, nextTick, watch } from 'vue';
 import { useStore } from 'src/store';
 import { cloneDeep, floor } from 'lodash';
 import SaveSimulationNearField from 'components/nearfield/SaveSimulationNearField.vue';
-import { nearFieldPlane } from 'src/store/simulation-setup/state';
+import {
+  nearFieldPlane,
+  nearFieldSetup,
+} from 'src/store/simulation-setup/state';
 
 export default defineComponent({
   name: 'RunSimulationNearField',
@@ -128,25 +131,18 @@ export default defineComponent({
       void setTimeout(() => {
         void nextTick(() => {
           $store.commit('simulationSetup/copySetupFromGuiToCurrent');
-
           const host = $store.state.simulationSetup.current.hostIndex;
-          const plotXSideResolution =
-            $store.state.simulationSetup.current.nearFieldSetup
-              .plotXSideResolution;
-          const plotYSideResolution =
-            $store.state.simulationSetup.current.nearFieldSetup
-              .plotYSideResolution;
-          const relativePlotSize =
+          const currentNearFieldSetup = cloneDeep(
             $store.state.simulationSetup.current.nearFieldSetup
-              .relativePlotSize;
-          const crossSection =
-            $store.state.simulationSetup.current.nearFieldSetup.crossSection;
-          const atX =
-            $store.state.simulationSetup.current.nearFieldSetup.atRelativeX0;
-          const atY =
-            $store.state.simulationSetup.current.nearFieldSetup.atRelativeY0;
-          const atZ =
-            $store.state.simulationSetup.current.nearFieldSetup.atRelativeZ0;
+          );
+          const plotXSideResolution = currentNearFieldSetup.plotXSideResolution;
+          const plotYSideResolution = currentNearFieldSetup.plotYSideResolution;
+          const relativePlotSize = currentNearFieldSetup.relativePlotSize;
+          const crossSection = currentNearFieldSetup.crossSection;
+          const atX = currentNearFieldSetup.atRelativeX0;
+          const atY = currentNearFieldSetup.atRelativeY0;
+          const atZ = currentNearFieldSetup.atRelativeZ0;
+
           const isMarkUnconvergedAsNaN = 1; // 0 - do not mark, else do mark
           try {
             if (!$store.state.simulationSetup.nmies.nearField.instance)
@@ -240,20 +236,52 @@ export default defineComponent({
       () => plotXSideResolutionGUI.value * plotYSideResolutionGUI.value
     );
 
+    let prevSettingsZoom = cloneDeep(
+      $store.state.simulationSetup.current.nearFieldSetup
+    );
+    let prevSettingsUser = cloneDeep(
+      $store.state.simulationSetup.current.nearFieldSetup
+    );
+
+    function isEqual(a: nearFieldSetup, b: nearFieldSetup) {
+      const keys = Object.keys(a);
+      for (let key of keys) {
+        // prettier-ignore
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line
+        if (a[key] != b[key]) return false
+      }
+      return true;
+    }
     function refineOnZoom() {
+      const currentSettings = cloneDeep(
+        $store.state.simulationSetup.current.nearFieldSetup
+      );
+      if (!isEqual(currentSettings, prevSettingsZoom)) {
+        // The only reason for current settings of near-field setup
+        // to be different from what was previously set in the end of
+        // refineOnZoom() is some user input... So, remember the state after
+        // last user intervention to use it on press of a 'reset' button.
+        prevSettingsUser = cloneDeep(currentSettings);
+      }
       if (sideX.value == 0 || sideY.value == 0) return;
-      $store.commit('guiRuntime/setIsFixedRatioNearField', false),
-        $store.commit(
-          'simulationSetup/setNearFieldRelativePlotSize',
-          sideX.value / 2.0
-        );
+      $store.commit('guiRuntime/setPlotRatioLabel', 'fixed');
+      $store.commit('guiRuntime/setPlotRatio', sideY.value / sideX.value);
+      $store.commit(
+        'simulationSetup/setNearFieldRelativePlotSize',
+        sideX.value / 2.0
+      );
       $store.commit(
         'simulationSetup/setNearFieldPlotXSideResolution',
         floor(Math.sqrt((totalPoints.value * sideX.value) / sideY.value))
       );
       $store.commit(
         'simulationSetup/setNearFieldPlotYSideResolution',
-        floor(Math.sqrt((totalPoints.value * sideY.value) / sideX.value))
+        floor(
+          $store.state.guiRuntime.plotRatio *
+            $store.state.simulationSetup.gui.nearFieldSetup.plotXSideResolution
+        )
       );
       if (crossSection.value == nearFieldPlane.Ek) {
         $store.commit('simulationSetup/setNearFieldAtRelativeZ0', atX.value);
@@ -267,6 +295,9 @@ export default defineComponent({
         $store.commit('simulationSetup/setNearFieldAtRelativeY0', atX.value);
         $store.commit('simulationSetup/setNearFieldAtRelativeX0', atY.value);
       }
+      prevSettingsZoom = cloneDeep(
+        $store.state.simulationSetup.gui.nearFieldSetup
+      );
       runNearFieldSimulation();
     }
 
@@ -294,10 +325,12 @@ export default defineComponent({
       refineOnZoom,
       isAutoRefineNearField,
       resetZoom() {
-        $store.commit('simulationSetup/setNearFieldAtRelativeZ0', 0);
-        $store.commit('simulationSetup/setNearFieldAtRelativeY0', 0);
-        $store.commit('simulationSetup/setNearFieldAtRelativeX0', 0);
-        $store.commit('simulationSetup/setNearFieldRelativePlotSize', 3.0);
+        $store.commit('simulationSetup/setNearFieldSetup', prevSettingsUser);
+        $store.commit(
+          'guiRuntime/setPlotRatio',
+          prevSettingsUser.plotYSideResolution /
+            prevSettingsUser.plotXSideResolution
+        );
         runNearFieldSimulation();
       },
     };

guiapp/src/index.template.html

@@ -20,6 +20,7 @@
                   border-radius: 50%;
                   border-top: 12px solid #444444;
                   width: 70px;
+
                   height: 70px;
                   animation: spin 1s linear infinite;
               }
@@ -42,7 +43,7 @@
                   background-color: rgba(55,55,55,0.5);
               }
               /*to make it compatible with physics.itmo.ru*/
-      #q-app .row, .q-item.row  {
+      .row {
           margin-left: unset;
           margin-right: unset;
           margin-bottom: unset;
@@ -73,6 +74,17 @@
       #q-app a:hover, #q-app a:focus {
           color: inherit;
       }
+      .col-sm-12 {
+          padding-left: unset;
+          padding-right: unset;
+      }
+      .container {
+          padding-left: unset;
+          padding-right: unset;
+      }
+      .q-page-scroller {
+          z-index: 1;
+      }
       </style>
 
   </head>

guiapp/src/store/gui-runtime/mutations.ts

@@ -15,8 +15,11 @@ function compare(a: material, b: material) {
 }
 
 const mutation: MutationTree<grsi> = {
-  setIsFixedRatioNearField(state: grsi, val: boolean) {
-    state.isFixedRatioNearField = val;
+  setPlotRatio(state: grsi, val: number) {
+    state.plotRatio = val;
+  },
+  setPlotRatioLabel(state: grsi, val: string) {
+    state.plotRatioLabel = val;
   },
   setIsSaveWithPythonScript(state: grsi, val: boolean) {
     state.isSaveWithPythonScript = val;

guiapp/src/store/gui-runtime/state.ts

@@ -12,7 +12,8 @@ export interface guiRuntimeStateInterface {
   safeToWL: number;
   isSaveWithPythonScript: boolean;
   isAutoRefineNearField: boolean;
-  isFixedRatioNearField: boolean;
+  plotRatio: number;
+  plotRatioLabel: string;
   nearFieldZoom: { fromX: number; toX: number; fromY: number; toY: number };
 }
 
@@ -27,7 +28,8 @@ function state(): guiRuntimeStateInterface {
     isSaveWithPythonScript: true,
     nearFieldZoom: { fromX: 0, toX: 1, fromY: 0, toY: 1 },
     isAutoRefineNearField: true,
-    isFixedRatioNearField: true,
+    plotRatio: 1,
+    plotRatioLabel: 'fixed',
     activatedMaterials: [
       // 'PEC',
       {

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

@@ -4,6 +4,7 @@ import {
   simulationSetup,
   layer,
   nearFieldPlane,
+  nearFieldSetup,
 } from './state';
 import { cloneDeep } from 'lodash';
 import { markRaw } from 'vue';
@@ -85,6 +86,9 @@ const mutation: MutationTree<sssi> = {
     state.gui.numberOfModesToPlot = val;
   },
 
+  setNearFieldSetup(state: sssi, val: nearFieldSetup) {
+    state.gui.nearFieldSetup = cloneDeep(val);
+  },
   setNearFieldWL(state: sssi, val: number) {
     state.gui.nearFieldSetup.atWL = val;
   },
@@ -92,15 +96,15 @@ const mutation: MutationTree<sssi> = {
     state.gui.nearFieldSetup.relativePlotSize = val;
   },
   setNearFieldAtRelativeX0(state: sssi, val: number) {
-    if (val < 1e-15) val = 0;
+    if (Math.abs(val) < 1e-15) val = 0;
     state.gui.nearFieldSetup.atRelativeX0 = val;
   },
   setNearFieldAtRelativeY0(state: sssi, val: number) {
-    if (val < 1e-15) val = 0;
+    if (Math.abs(val) < 1e-15) val = 0;
     state.gui.nearFieldSetup.atRelativeY0 = val;
   },
   setNearFieldAtRelativeZ0(state: sssi, val: number) {
-    if (val < 1e-15) val = 0;
+    if (Math.abs(val) < 1e-15) val = 0;
     state.gui.nearFieldSetup.atRelativeZ0 = val;
   },
   setNearFieldPlotXSideResolution(state: sssi, val: number) {