changeable UI stroke width

src/Controller.vue

@@ -199,6 +199,10 @@ const replaceApple = (cx: number, cy: number, r: number) => {
             <tr>
                 <td><label><input type="checkbox" v-model="options.opticalAxis"> Optical axis</label></td>
             </tr>
+            <tr>
+                <td>UI stroke width</td>
+                <td><input type="range" min="0" max="3" step="0.01" v-model.number="style.widthUI"></td>
+            </tr>
         </template>
         <!-- Field -->
         <template v-if="options.advanced">

src/SVG/SVG.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import { state, lights, lens, sensor, field, options, lensR, lensD, infR, fNumber } from '../globals'
+import { state, lights, lens, sensor, style, options, lensR, lensD, infR, fNumber } from '../globals'
 import * as h from '../handlers'
 
 import Grid from './Grid.vue'
@@ -24,7 +24,7 @@ const svgViewBox = computed(() => {
 })
 
 const strokeWidth = computed(() => {
-  const scale = 1 / state.value.scale
+  const scale = style.value.widthUI / state.value.scale
   const scaleFd = 2
   const scaleBg = 4
   return {

src/globals.ts

@@ -118,6 +118,8 @@ export const style0 = () => {
         // Rays
         rayWidth: 0.2,
         rayIntensity: 0.5,
+        // UI
+        widthUI: 1.0,
     }
 }
 export const style = ref(style0())