From 740b31018380575a23922f79b7c2067d72379a2c Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sat, 22 Jun 2024 23:17:45 +0900
Subject: [PATCH 01/53] Multiple lens mock

---
 src/SVG/Lens.vue | 105 +++++++++++++++++++++++++++++++++++++++++++++++
 src/SVG/SVG.vue  |  30 ++++++++------
 src/globals.ts   |  13 ++++++
 src/handlers.ts  |  11 +++--
 4 files changed, 143 insertions(+), 16 deletions(-)
 create mode 100644 src/SVG/Lens.vue

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
new file mode 100644
index 0000000..8ff631e
--- /dev/null
+++ b/src/SVG/Lens.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { state, infR, items, sensor, options, style, rUI, maxLightX } from '../globals'
+import { vec, Vec, calcLensR } from '../math'
+import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
+
+const props = defineProps(['lens', 'idx'])
+
+const R = computed(() => {
+    return calcLensR(props.lens.n, props.lens.f, props.lens.r)
+})
+
+const D = computed(() => {
+    const r = props.lens.r
+    return 2 * (R.value - Math.sqrt(R.value * R.value - r * r))
+})
+
+const moveStartHandler = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m0 = getPositionOnSvg(e);
+    const cx0 = props.lens.x;
+    setMoveHandler((e_: any) => {
+        const d = getPositionDiffOnSvgApp(e_, m0)
+        if (cx0 + d.x < maxLightX.value + D.value / 2) {
+            items.value[props.idx].x = maxLightX.value + D.value / 2
+        } else if (sensor.value.x < cx0 + d.x) {
+            items.value[props.idx].x = sensor.value.x
+        } else {
+            items.value[props.idx].x = cx0 + d.x
+        }
+    })
+}
+
+const lensSizeChangeStartHandler = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m0 = getPositionOnSvg(e);
+    const r0 = props.lens.r;
+    setMoveHandler((e_: any) => {
+        const d = getPositionDiffOnSvgApp(e_, m0)
+        if (r0 - d.y < 0.1) {
+            items.value[props.idx].r = 0.1;
+        } else {
+            items.value[props.idx].r = r0 - d.y;
+        }
+    })
+}
+const focalPointMoveStartHandler = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m0 = getPositionOnSvg(e);
+    const f0 = props.lens.f;
+    setMoveHandler((e_: any) => {
+        const d = getPositionDiffOnSvgApp(e_, m0)
+        if (f0 - d.x < D.value / 2) {
+            items.value[props.idx].f = D.value / 2
+        } else {
+            items.value[props.idx].f = f0 - d.x
+        }
+    })
+}
+
+</script>
+
+<template>
+    <g>
+        <g class="hover-parent">
+            <!-- left half background -->
+            <path :d="`M ${lens.x} ${-lens.r} A ${R} ${R} 0 0 0 ${lens.x} ${lens.r}`"
+                class="hover-child-bg fill-none" />
+            <!-- right half background -->
+            <path :d="`M ${lens.x} ${-lens.r} A ${R} ${R} 0 0 1 ${lens.x} ${lens.r}`"
+                class="hover-child-bg fill-none" />
+            <!-- left half -->
+            <path :d="`M ${lens.x} ${-lens.r} A ${R} ${R} 0 0 0 ${lens.x} ${lens.r}`" class="hover-child fill-none" />
+            <!-- right half -->
+            <path :d="`M ${lens.x} ${-lens.r} A ${R} ${R} 0 0 1 ${lens.x} ${lens.r}`" class="hover-child fill-none" />
+            <!-- dummy for ui -->
+            <rect class='ui-transparent' :x="lens.x - D / 2" :y="-lens.r" :width="D" :height="2 * lens.r"
+                @mousedown="moveStartHandler" />
+        </g>
+        <!-- Focal points -->
+        <g v-if="options.lensFocalPoints">
+            <!-- left hand -->
+            <g>
+                <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
+                <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2" class="white"></circle>
+                <!-- UI -->
+                <circle :cx="lens.x - lens.f" cy="0" :r="rUI" @mousedown="focalPointMoveStartHandler"
+                    class="ui-hidden">
+                </circle>
+            </g>
+            <!-- right hand -->
+            <circle :cx="lens.x + lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
+            <circle :cx="lens.x + lens.f" cy="0" :r="rUI / 2" class="white"></circle>
+
+            <!-- Double focal points -->
+            <g v-if="options.lensDoubleFocalPoints">
+                <circle :cx="lens.x - 2 * lens.f" cy="0" :r="rUI / 2" class="white"></circle>
+                <circle :cx="lens.x + 2 * lens.f" cy="0" :r="rUI / 2" class="white"></circle>
+            </g>
+        </g>
+        <!-- Lens size change UI-->
+        <circle :cx="lens.x" :cy="-lens.r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler">
+        </circle>
+    </g>
+</template>
\ No newline at end of file
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 792a76b..328707b 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import { state, lights, lens, sensor, style, apple, options, lensR, lensD, infR, fNumber, rUI } from '../globals'
+import { state, lights, lens, items, sensor, style, apple, options, lensR, lensD, infR, fNumber, rUI } from '../globals'
 import * as h from '../handlers'
 import { Light } from '../type'
 
 import Grid from './Grid.vue'
 import Guideline from './Guideline.vue'
 import LightParallel from './LightParallel.vue'
+import Lens from './Lens.vue'
 
 // Reference to the svg element
 // This is needed for handles in handlers.ts
@@ -43,8 +44,6 @@ const strokeWidth = computed(() => {
   }
 })
 
-const lineBgColor = "#000a"
-
 const strokeDashArray = computed(() => {
   const scale = 1 / state.value.scale
   return 4 * scale;
@@ -81,7 +80,7 @@ const strokeDashArray = computed(() => {
     <g
       v-if="options.lens && options.sensor && options.circleOfConfusion && options.angleOfView && options.depthOfField && options.hyperfocalPoint">
       <circle :cx="lens.x - lens.f - lens.f * lens.f / (lens.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2 * 1.2"
-        :fill="lineBgColor"></circle>
+        :fill="style.lineBgColor"></circle>
       <circle :cx="lens.x - lens.f - lens.f * lens.f / (lens.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2"
         class="white"></circle>
     </g>
@@ -121,14 +120,14 @@ const strokeDashArray = computed(() => {
       <g v-if="options.lensFocalPoints">
         <!-- left hand -->
         <g>
-          <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="lineBgColor"></circle>
+          <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
           <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2" class="white"></circle>
           <!-- UI -->
           <circle :cx="lens.x - lens.f" cy="0" :r="rUI" @mousedown="h.focalPointMoveStartHandler" class="ui-hidden">
           </circle>
         </g>
         <!-- right hand -->
-        <circle :cx="lens.x + lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="lineBgColor"></circle>
+        <circle :cx="lens.x + lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
         <circle :cx="lens.x + lens.f" cy="0" :r="rUI / 2" class="white"></circle>
 
         <!-- Double focal points -->
@@ -142,6 +141,13 @@ const strokeDashArray = computed(() => {
       </circle>
     </g>
 
+    <!-- Items -->
+    <g v-if="options.lens">
+      <g v-for="(item, idx) in items">
+        <Lens :lens="item" :idx></Lens>
+      </g>
+    </g>
+
     <!-- Aperture -->
     <g v-if="options.aperture">
       <!-- Lines -->
@@ -218,7 +224,7 @@ svg {
 }
 
 .hover-child-bg {
-  stroke: v-bind('lineBgColor');
+  stroke: v-bind('style.lineBgColor');
   stroke-width: v-bind('strokeWidth.normalBg');
 }
 
@@ -236,7 +242,7 @@ svg {
 }
 
 .hover-sibling-bg {
-  stroke: v-bind('lineBgColor');
+  stroke: v-bind('style.lineBgColor');
   stroke-width: v-bind('strokeWidth.normalBg');
 }
 
@@ -250,7 +256,7 @@ svg {
 .hover-sibling-master:hover~.hover-sibling-bg,
 .hover-parent:hover .hover-child-bg,
 .hover-parent:hover .hidden-hover-child-bg {
-  stroke: v-bind('lineBgColor');
+  stroke: v-bind('style.lineBgColor');
   stroke-width: v-bind('strokeWidth.boldBg');
 }
 
@@ -261,7 +267,7 @@ svg {
 }
 
 .ui-bg {
-  stroke: v-bind('lineBgColor');
+  stroke: v-bind('style.lineBgColor');
   stroke-width: v-bind('strokeWidth.normalBg');
   fill: transparent
 }
@@ -318,7 +324,7 @@ svg {
 }
 
 .dotted-bg {
-  stroke: v-bind('lineBgColor');
+  stroke: v-bind('style.lineBgColor');
   /* dasharray is disabled for performance issue when close-up */
   /* stroke-dasharray: v-bind(strokeDashArray); */
   stroke-width: v-bind('strokeWidth.thickBg');
@@ -326,7 +332,7 @@ svg {
 }
 
 .dotted-thick-bg {
-  stroke: v-bind('lineBgColor');
+  stroke: v-bind('style.lineBgColor');
   /* dasharray is disabled for performance issue when close-up */
   /* stroke-dasharray: v-bind(strokeDashArray); */
   stroke-width: v-bind('strokeWidth.thickerBg');
diff --git a/src/globals.ts b/src/globals.ts
index 0477ed4..170a65c 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -53,6 +53,18 @@ export const lens0 = () => {
 }
 export const lens = ref(lens0())
 
+//--------------------------------
+// Items
+//--------------------------------
+
+export const items0 = () => {
+    return [
+        { x: -100, r: 20, f: 50, n: 1.5, aperture: 1},
+        { x: -200, r: 12, f: 100, n: 1.5, aperture: 1},
+    ]
+}
+export const items = ref(items0())
+
 //--------------------------------
 // Sensor
 //--------------------------------
@@ -174,6 +186,7 @@ export const style0 = () => {
         rayIntensity: 0.5,
         // UI
         widthUI: 1.0,
+        lineBgColor: "#000a",
     }
 }
 export const style = ref(style0())
diff --git a/src/handlers.ts b/src/handlers.ts
index 3ca94f7..b8330dd 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -14,30 +14,33 @@ export const setSvg = (svg_: Ref<any>) => {
 }
 
 // Methods
-const getPositionOnSvg = (e: any) => {
+export const getPositionOnSvg = (e: any) => {
     const rect = svg.value.getBoundingClientRect()
     const x = e.clientX - rect.left
     const y = e.clientY - rect.top
     return vec(x, y)
 }
-const getPositionOnSvgApp = (e: any) => {
+export const getPositionOnSvgApp = (e: any) => {
     const m = getPositionOnSvg(e);
     const x = (m.x - state.value.width / 2) / state.value.scale + state.value.c.x;
     const y = (m.y - state.value.height / 2) / state.value.scale + state.value.c.y;
     return vec(x, y)
 }
-const getPositionDiffOnSvgApp = (e: any, m0: Vec) => {
+export const getPositionDiffOnSvgApp = (e: any, m0: Vec) => {
     const m = getPositionOnSvg(e);
     const d = m.sub(m0).div(state.value.scale)
     return d
 }
-const preventDefaultAndStopPropagation = (e: any) => {
+export const preventDefaultAndStopPropagation = (e: any) => {
     e.stopPropagation()
     e.preventDefault()
 }
 
 // Event handlers
 let moveHandler: any = null;
+export const setMoveHandler = (h: any) => {
+    moveHandler = h
+}
 export const svgMoveStartHandler = (e: any) => {
     e.preventDefault();
     const m0 = getPositionOnSvg(e);

From 4933517f09693f7668c80dc517e8982df923b8f4 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sat, 22 Jun 2024 23:34:37 +0900
Subject: [PATCH 02/53] Move coc to sensor

---
 src/Controller.vue    | 4 ++--
 src/Preview.vue       | 2 +-
 src/SVG/Guideline.vue | 2 +-
 src/SVG/SVG.vue       | 4 ++--
 src/globals.ts        | 6 +++---
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Controller.vue b/src/Controller.vue
index 5d8f966..25221a2 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -139,9 +139,9 @@ const nRays = computed(() => {
                 <tr>
                     <td><label><input type="checkbox" v-model="options.circleOfConfusion"> CoC</label></td>
                     <template v-if="options.circleOfConfusion">
-                        <td><input type="range" min="0" max="10" step="0.001" v-model.number="lens.circleOfConfusion">
+                        <td><input type="range" min="0" max="10" step="0.001" v-model.number="sensor.circleOfConfusion">
                         </td>
-                        <td>{{ humanReadable(lens.circleOfConfusion) }}</td>
+                        <td>{{ humanReadable(sensor.circleOfConfusion) }}</td>
                     </template>
                 </tr>
                 <tr>
diff --git a/src/Preview.vue b/src/Preview.vue
index 60ed9c7..9eedaec 100644
--- a/src/Preview.vue
+++ b/src/Preview.vue
@@ -36,7 +36,7 @@ const draw = () => {
     ctx.beginPath();
     ctx.fillStyle = 'white'
     const width = 0.01 * sensor.value.r
-    ctx.rect(-width / 2, -lens.value.circleOfConfusion / 2, width, lens.value.circleOfConfusion);
+    ctx.rect(-width / 2, -sensor.value.circleOfConfusion / 2, width, sensor.value.circleOfConfusion);
     ctx.fill()
     ctx.stroke();
   }
diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index f470db3..512186c 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -56,7 +56,7 @@ const aov = computed(() => {
 const dof = computed(() => {
     const f = lens.value.f
     const r = re.value
-    const delta = lens.value.circleOfConfusion
+    const delta = sensor.value.circleOfConfusion
 
     const bx = sensor.value.x - lens.value.x
     const by = sensor.value.r // Unused
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 328707b..66101a9 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -79,9 +79,9 @@ const strokeDashArray = computed(() => {
     <!-- Hyperfocal point -->
     <g
       v-if="options.lens && options.sensor && options.circleOfConfusion && options.angleOfView && options.depthOfField && options.hyperfocalPoint">
-      <circle :cx="lens.x - lens.f - lens.f * lens.f / (lens.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2 * 1.2"
+      <circle :cx="lens.x - lens.f - lens.f * lens.f / (sensor.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2 * 1.2"
         :fill="style.lineBgColor"></circle>
-      <circle :cx="lens.x - lens.f - lens.f * lens.f / (lens.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2"
+      <circle :cx="lens.x - lens.f - lens.f * lens.f / (sensor.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2"
         class="white"></circle>
     </g>
 
diff --git a/src/globals.ts b/src/globals.ts
index 170a65c..1bcf034 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -48,7 +48,6 @@ export const lens0 = () => {
         n: 1.5,
         f: 50,
         aperture: 1,
-        circleOfConfusion: 1,
     }
 }
 export const lens = ref(lens0())
@@ -59,8 +58,8 @@ export const lens = ref(lens0())
 
 export const items0 = () => {
     return [
-        { x: -100, r: 20, f: 50, n: 1.5, aperture: 1},
-        { x: -200, r: 12, f: 100, n: 1.5, aperture: 1},
+        { x: -50, r: 20, f: 50, n: 1.5, aperture: 1 },
+        { x: -100, r: 12, f: 100, n: 1.5, aperture: 1 },
     ]
 }
 export const items = ref(items0())
@@ -73,6 +72,7 @@ export const sensor0 = () => {
     return {
         x: 80,
         r: 24 / 2, // Full frame
+        circleOfConfusion: 1,
     }
 }
 export const sensor = ref(sensor0())

From ba353282e6e35bbec11ccc6d8854f77abfcc3802 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 00:12:58 +0900
Subject: [PATCH 03/53] lens d as parameter

---
 src/Canvas.vue     |  6 ++--
 src/Controller.vue |  4 +--
 src/SVG/Lens.vue   | 81 +++++++++++++++++++++++++++++++---------------
 src/SVG/SVG.vue    | 28 +++++++++-------
 src/globals.ts     | 14 +++-----
 src/handlers.ts    | 16 ++++-----
 src/math.ts        | 47 +++------------------------
 7 files changed, 93 insertions(+), 103 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 716b8ee..7e3b994 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { watch, onMounted, ref } from 'vue'
 
-import { state, lights, lens, sensor, sensorData, apple, options, style, lensR, lensD, infR } from './globals'
+import { state, lights, lens, sensor, sensorData, apple, options, style, lensR, infR } from './globals'
 import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, intersectionSS } from './math'
 
 import { Light } from './type'
@@ -35,7 +35,7 @@ const drawRay = (image: Vec, s0: Vec, s: Vec, v: Vec, color: number, sensorDataT
   //--------------------------------
   if (!options.value.lensIdeal && options.value.lens) {
     // Center of lens curvature circle
-    const c = vec(lens.value.x - lensD.value / 2 + lensR.value, 0)
+    const c = vec(lens.value.x - lens.value.d / 2 + lensR.value, 0)
 
     const p = getIntersectionLens(s, v, c, lens.value.r, lensR.value, true)
     if (p) {
@@ -73,7 +73,7 @@ const drawRay = (image: Vec, s0: Vec, s: Vec, v: Vec, color: number, sensorDataT
   //--------------------------------
   if (!options.value.lensIdeal && innerLens) {
     // Center of lens curvature circle
-    const c = vec(lens.value.x + lensD.value / 2 - lensR.value, 0)
+    const c = vec(lens.value.x + lens.value.d / 2 - lensR.value, 0)
 
     const p = getIntersectionLens(s, v, c, lens.value.r, lensR.value, false)
     if (p) {
diff --git a/src/Controller.vue b/src/Controller.vue
index 25221a2..0ca29c3 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { state, lights, lens, sensor, appleProps, options, style, lensD, lensR, fNumber } from './globals'
+import { state, lights, lens, sensor, appleProps, options, style, lensR, fNumber } from './globals'
 import { humanReadable } from './utils';
 import { Light } from "./type"
 
@@ -118,7 +118,7 @@ const nRays = computed(() => {
                 <tr>
                     <td>Thickness</td>
                     <td></td>
-                    <td>{{ humanReadable(lensD) }}</td>
+                    <td>{{ humanReadable(lens.d) }}</td>
                 </tr>
             </template>
         </template>
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 8ff631e..136bc1a 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -7,12 +7,7 @@ import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, get
 const props = defineProps(['lens', 'idx'])
 
 const R = computed(() => {
-    return calcLensR(props.lens.n, props.lens.f, props.lens.r)
-})
-
-const D = computed(() => {
-    const r = props.lens.r
-    return 2 * (R.value - Math.sqrt(R.value * R.value - r * r))
+    return calcLensR(props.lens.f, props.lens.n, props.lens.d)
 })
 
 const moveStartHandler = (e: any) => {
@@ -21,8 +16,8 @@ const moveStartHandler = (e: any) => {
     const cx0 = props.lens.x;
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (cx0 + d.x < maxLightX.value + D.value / 2) {
-            items.value[props.idx].x = maxLightX.value + D.value / 2
+        if (cx0 + d.x < maxLightX.value + props.lens.d / 2) {
+            items.value[props.idx].x = maxLightX.value + props.lens.d / 2
         } else if (sensor.value.x < cx0 + d.x) {
             items.value[props.idx].x = sensor.value.x
         } else {
@@ -38,9 +33,11 @@ const lensSizeChangeStartHandler = (e: any) => {
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         if (r0 - d.y < 0.1) {
-            items.value[props.idx].r = 0.1;
+            items.value[props.idx].r = 0.1
+        } else if (r0 - d.y > rMax.value) {
+            items.value[props.idx].r = rMax.value
         } else {
-            items.value[props.idx].r = r0 - d.y;
+            items.value[props.idx].r = r0 - d.y
         }
     })
 }
@@ -50,31 +47,64 @@ const focalPointMoveStartHandler = (e: any) => {
     const f0 = props.lens.f;
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (f0 - d.x < D.value / 2) {
-            items.value[props.idx].f = D.value / 2
+        if (f0 - d.x < props.lens.d / 2) {
+            items.value[props.idx].f = props.lens.d / 2
         } else {
             items.value[props.idx].f = f0 - d.x
         }
     })
 }
 
+const rMax = computed(() => {
+    const d = props.lens.d
+    return Math.sqrt(R.value * R.value - (R.value - d / 2) * (R.value - d / 2))
+})
+
+const r = computed(() => {
+    return Math.min(rMax.value, props.lens.r)
+})
+
+const leftX = computed(() => {
+    const x = props.lens.x
+    const d = props.lens.d
+    return x - d / 2 + (R.value - Math.sqrt(R.value * R.value - r.value * r.value))
+})
+
+const rightX = computed(() => {
+    const x = props.lens.x
+    const d = props.lens.d
+    return x + d / 2 - (R.value - Math.sqrt(R.value * R.value - r.value * r.value))
+})
+
 </script>
 
 <template>
     <g>
         <g class="hover-parent">
-            <!-- left half background -->
-            <path :d="`M ${lens.x} ${-lens.r} A ${R} ${R} 0 0 0 ${lens.x} ${lens.r}`"
-                class="hover-child-bg fill-none" />
-            <!-- right half background -->
-            <path :d="`M ${lens.x} ${-lens.r} A ${R} ${R} 0 0 1 ${lens.x} ${lens.r}`"
-                class="hover-child-bg fill-none" />
-            <!-- left half -->
-            <path :d="`M ${lens.x} ${-lens.r} A ${R} ${R} 0 0 0 ${lens.x} ${lens.r}`" class="hover-child fill-none" />
-            <!-- right half -->
-            <path :d="`M ${lens.x} ${-lens.r} A ${R} ${R} 0 0 1 ${lens.x} ${lens.r}`" class="hover-child fill-none" />
+            <!-- Background -->
+            <g class="hover-child-bg fill-none">
+                <!-- left -->
+                <path :d="`M ${leftX} ${-r} A ${R} ${R} 0 0 0 ${leftX} ${r}`" />
+                <!-- right -->
+                <path :d="`M ${rightX} ${-r} A ${R} ${R} 0 0 1 ${rightX} ${r}`" />
+                <!-- Top -->
+                <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
+                <!-- Bottom -->
+                <line :x1="leftX" :y1="r" :x2="rightX" :y2="r"></line>
+            </g>
+            <!-- Foreground -->
+            <g class="hover-child fill-none">
+                <!-- left -->
+                <path :d="`M ${leftX} ${-r} A ${R} ${R} 0 0 0 ${leftX} ${r}`" />
+                <!-- right -->
+                <path :d="`M ${rightX} ${-r} A ${R} ${R} 0 0 1 ${rightX} ${r}`" />
+                <!-- Top -->
+                <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
+                <!-- Bottom -->
+                <line :x1="leftX" :y1="r" :x2="rightX" :y2="r"></line>
+            </g>
             <!-- dummy for ui -->
-            <rect class='ui-transparent' :x="lens.x - D / 2" :y="-lens.r" :width="D" :height="2 * lens.r"
+            <rect class='ui-transparent' :x="lens.x - lens.d / 2" :y="-r" :width="lens.d" :height="2 * r"
                 @mousedown="moveStartHandler" />
         </g>
         <!-- Focal points -->
@@ -84,8 +114,7 @@ const focalPointMoveStartHandler = (e: any) => {
                 <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
                 <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2" class="white"></circle>
                 <!-- UI -->
-                <circle :cx="lens.x - lens.f" cy="0" :r="rUI" @mousedown="focalPointMoveStartHandler"
-                    class="ui-hidden">
+                <circle :cx="lens.x - lens.f" cy="0" :r="rUI" @mousedown="focalPointMoveStartHandler" class="ui-hidden">
                 </circle>
             </g>
             <!-- right hand -->
@@ -99,7 +128,7 @@ const focalPointMoveStartHandler = (e: any) => {
             </g>
         </g>
         <!-- Lens size change UI-->
-        <circle :cx="lens.x" :cy="-lens.r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler">
+        <circle :cx="lens.x" :cy="-r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler">
         </circle>
     </g>
 </template>
\ No newline at end of file
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 66101a9..63a97c7 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import { state, lights, lens, items, sensor, style, apple, options, lensR, lensD, infR, fNumber, rUI } from '../globals'
+import { state, lights, lens, items, sensor, style, apple, options, lensR, infR, fNumber, rUI } from '../globals'
 import * as h from '../handlers'
 import { Light } from '../type'
 
@@ -66,11 +66,11 @@ const strokeDashArray = computed(() => {
 
     <!-- Curvature -->
     <g v-if="options.lens && options.curvature">
-      <circle :cx="lens.x + lensD / 2 - lensR" :cy="0" :r="lensR" class="dotted"></circle>
-      <circle :cx="lens.x - lensD / 2 + lensR" :cy="0" :r="lensR" class="dotted"></circle>
+      <circle :cx="lens.x + lens.d / 2 - lensR" :cy="0" :r="lensR" class="dotted"></circle>
+      <circle :cx="lens.x - lens.d / 2 + lensR" :cy="0" :r="lensR" class="dotted"></circle>
       <!-- center point -->
-      <circle :cx="lens.x + lensD / 2 - lensR" cy="0" :r="rUI / 2" class="white"></circle>
-      <circle :cx="lens.x - lensD / 2 + lensR" cy="0" :r="rUI / 2" class="white"></circle>
+      <circle :cx="lens.x + lens.d / 2 - lensR" cy="0" :r="rUI / 2" class="white"></circle>
+      <circle :cx="lens.x - lens.d / 2 + lensR" cy="0" :r="rUI / 2" class="white"></circle>
     </g>
 
     <!-- Guidelines -->
@@ -88,8 +88,8 @@ const strokeDashArray = computed(() => {
     <!-- Lens and Sensor move dummy element-->
     <g v-if="options.lens && options.sensor" class="hover-parent">
       <!-- lens -->
-      <path :d="`M ${lens.x} ${-lens.r} A ${lensR} ${lensR} 0 0 0 ${lens.x} ${lens.r}`" class="hover-child fill-none" />
-      <path :d="`M ${lens.x} ${-lens.r} A ${lensR} ${lensR} 0 0 1 ${lens.x} ${lens.r}`" class="hover-child fill-none" />
+      <!-- <path :d="`M ${lens.x} ${-lens.r} A ${lensR} ${lensR} 0 0 0 ${lens.x} ${lens.r}`" class="hover-child fill-none" />
+      <path :d="`M ${lens.x} ${-lens.r} A ${lensR} ${lensR} 0 0 1 ${lens.x} ${lens.r}`" class="hover-child fill-none" /> -->
       <!-- sensor -->
       <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="hover-child" />
       <!-- dummy for ui -->
@@ -101,19 +101,23 @@ const strokeDashArray = computed(() => {
     <g v-if="options.lens">
       <g class="hover-parent">
         <!-- left half background -->
-        <path :d="`M ${lens.x} ${-lens.r} A ${lensR} ${lensR} 0 0 0 ${lens.x} ${lens.r}`"
+        <path
+          :d="`M ${lens.x - lens.d / 2 + (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${-lens.r} A ${lensR} ${lensR} 0 0 0 ${lens.x - lens.d / 2 + (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${lens.r}`"
           class="hover-child-bg fill-none" />
         <!-- right half background -->
-        <path :d="`M ${lens.x} ${-lens.r} A ${lensR} ${lensR} 0 0 1 ${lens.x} ${lens.r}`"
+        <path
+          :d="`M ${lens.x + lens.d / 2 - (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${-lens.r} A ${lensR} ${lensR} 0 0 1 ${lens.x + lens.d / 2 - (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${lens.r}`"
           class="hover-child-bg fill-none" />
         <!-- left half -->
-        <path :d="`M ${lens.x} ${-lens.r} A ${lensR} ${lensR} 0 0 0 ${lens.x} ${lens.r}`"
+        <path
+          :d="`M ${lens.x - lens.d / 2 + (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${-lens.r} A ${lensR} ${lensR} 0 0 0 ${lens.x - lens.d / 2 + (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${lens.r}`"
           class="hover-child fill-none" />
         <!-- right half -->
-        <path :d="`M ${lens.x} ${-lens.r} A ${lensR} ${lensR} 0 0 1 ${lens.x} ${lens.r}`"
+        <path
+          :d="`M ${lens.x + lens.d / 2 - (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${-lens.r} A ${lensR} ${lensR} 0 0 1 ${lens.x + lens.d / 2 - (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${lens.r}`"
           class="hover-child fill-none" />
         <!-- dummy for ui -->
-        <rect class='ui-transparent' :x="lens.x - lensD / 2" :y="-lens.r" :width="lensD" :height="2 * lens.r"
+        <rect class='ui-transparent' :x="lens.x - lens.d / 2" :y="-lens.r" :width="lens.d" :height="2 * lens.r"
           @mousedown="h.lensMoveStartHandler" />
       </g>
       <!-- Focal points -->
diff --git a/src/globals.ts b/src/globals.ts
index 1bcf034..fa8aad7 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -47,6 +47,7 @@ export const lens0 = () => {
         r: 20,
         n: 1.5,
         f: 50,
+        d: 5,
         aperture: 1,
     }
 }
@@ -58,8 +59,8 @@ export const lens = ref(lens0())
 
 export const items0 = () => {
     return [
-        { x: -50, r: 20, f: 50, n: 1.5, aperture: 1 },
-        { x: -100, r: 12, f: 100, n: 1.5, aperture: 1 },
+        { x: -50, r: 20, f: 50, n: 1.5, d: 5, aperture: 1 },
+        { x: -100, r: 12, f: 100, n: 1.5, d: 5, aperture: 1 },
     ]
 }
 export const items = ref(items0())
@@ -196,14 +197,7 @@ export const style = ref(style0())
 //================================
 
 export const lensR = computed(() => {
-    return calcLensR(lens.value.n, lens.value.f, lens.value.r)
-    // return 2 * (lens.value.n - 1) * (2 * lens.value.f)
-})
-
-export const lensD = computed(() => {
-    const R = lensR.value
-    const r = lens.value.r
-    return 2 * (R - Math.sqrt(R * R - r * r))
+    return calcLensR(lens.value.f, lens.value.n, lens.value.d)
 })
 
 export const infR = computed(() => {
diff --git a/src/handlers.ts b/src/handlers.ts
index b8330dd..60764e1 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import { state, lights, lens, sensor, maxLightX, lensD } from "./globals";
+import { state, lights, lens, sensor, maxLightX } from "./globals";
 import { Light } from './type'
 import { vec, Vec } from './math'
 
@@ -85,7 +85,7 @@ export const lightMoveStartHandler = (e: any, idx: number) => {
     })
     newLights.push(light)
     lights.value = newLights
-    const minLensX = lens.value.x - lensD.value / 2
+    const minLensX = lens.value.x - lens.value.d / 2
 
     if (light.type === Light.Point) {
         const m0 = getPositionOnSvg(e);
@@ -135,8 +135,8 @@ export const parallelLightNodeMoveStartHandler = (e: any, idx: number, which: st
         const p = which === "s" ? light.s : light.t
         moveHandler = (e_: any) => {
             const d = getPositionDiffOnSvgApp(e_, m0)
-            if (p0.x + d.x > lens.value.x - lensD.value / 2) {
-                p.x = lens.value.x - lensD.value / 2
+            if (p0.x + d.x > lens.value.x - lens.value.d / 2) {
+                p.x = lens.value.x - lens.value.d / 2
             } else {
                 p.x = p0.x + d.x
             }
@@ -166,8 +166,8 @@ export const lensMoveStartHandler = (e: any) => {
     const cx0 = lens.value.x;
     moveHandler = (e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (cx0 + d.x < maxLightX.value + lensD.value / 2) {
-            lens.value.x = maxLightX.value + lensD.value / 2
+        if (cx0 + d.x < maxLightX.value + lens.value.d / 2) {
+            lens.value.x = maxLightX.value + lens.value.d / 2
         } else if (sensor.value.x < cx0 + d.x) {
             lens.value.x = sensor.value.x
         } else {
@@ -194,8 +194,8 @@ export const focalPointMoveStartHandler = (e: any) => {
     const f0 = lens.value.f;
     moveHandler = (e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (f0 - d.x < lensD.value / 2) {
-            lens.value.f = lensD.value / 2
+        if (f0 - d.x < lens.value.d / 2) {
+            lens.value.f = lens.value.d / 2
         } else {
             lens.value.f = f0 - d.x
         }
diff --git a/src/math.ts b/src/math.ts
index cc05d79..0457e45 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -217,46 +217,9 @@ export const fGaussian = (f: number, px: number, py: number) => {
     return vec(qx, qy)
 }
 
-export const calcLensR = (n: number, f: number, r: number) => {
-    // This formula is made from lens-maker's formula and d = 2(R-sqrt(R^2-r^2))
-    const func = (R: number) => {
-        let res = 0;
-        res += n * n * Math.pow(R, 4);
-        res += - 4 * n * (n - 1) * f * Math.pow(R, 3);
-        res += 4 * (n - 1) * (n - 1) * f * f * (1 - (n - 1) * (n - 1)) * R * R;
-        res += 4 * Math.pow(n - 1, 4) * f * f * r * r;
-
-        return res;
-    };
-
-    // Derivative of func
-    const funcc = (R: number) => {
-        let res = 0;
-        res += 4 * n * n * Math.pow(R, 3);
-        res += - 12 * n * (n - 1) * f * Math.pow(R, 2);
-        res += 8 * (n - 1) * (n - 1) * f * f * (1 - (n - 1) * (n - 1)) * R;
-        return res;
-    };
-
-    // Solve func(R) = 0 by Newton' method
-    let R = 100 * n; // NOTICE: Very heuristic
-    for (let i = 0; i < 100; i++) {
-        // console.log(R, func(R), funcc(R))
-        R = R - func(R) / funcc(R);
-
-        // Validation R with desired focal length
-        // Calculate focal length by lens maker's formula
-        const d = 2 * (R - Math.sqrt(R * R - r * r));
-        const desiredLensF = f;
-        const actualLensF = 1.0 / (2 * (n - 1) / R - (n - 1) * (n - 1) * d / (n * R * R));
-
-        const absError = Math.abs(desiredLensF - actualLensF);
-        const relError = absError / desiredLensF;
-        if (relError < 1e-8) {
-            return R;
-        }
-    }
-
-    // Failed
-    return -1.0;
+export const calcLensR = (f: number, n: number, d: number) => {
+    const a = 1
+    const b = -2 * f * (n - 1)
+    const c = d * (n - 1) * (n - 1)
+    return (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a)
 }
\ No newline at end of file

From 8d7b18db5d176f7c9b724eb41c7b2d0749ecafc2 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 00:44:46 +0900
Subject: [PATCH 04/53] Add aperture to lens

---
 src/SVG/Lens.vue | 38 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 136bc1a..99bf488 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -55,6 +55,23 @@ const focalPointMoveStartHandler = (e: any) => {
     })
 }
 
+const apertureSizeChangeStartHandler = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m0 = getPositionOnSvg(e);
+    const a0 = props.lens.aperture * r.value;
+    setMoveHandler((e_: any) => {
+        const d = getPositionDiffOnSvgApp(e_, m0)
+        const an = (a0 + d.y) / r.value;
+        if (an < 0) {
+            items.value[props.idx].aperture = 0;
+        } else if (an > 1) {
+            items.value[props.idx].aperture = 1;
+        } else {
+            items.value[props.idx].aperture = an;
+        }
+    })
+}
+
 const rMax = computed(() => {
     const d = props.lens.d
     return Math.sqrt(R.value * R.value - (R.value - d / 2) * (R.value - d / 2))
@@ -128,7 +145,24 @@ const rightX = computed(() => {
             </g>
         </g>
         <!-- Lens size change UI-->
-        <circle :cx="lens.x" :cy="-r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler">
-        </circle>
+        <circle :cx="lens.x" :cy="-r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler"> </circle>
+
+        <!-- Aperture -->
+        <g v-if="options.aperture">
+            <!-- Lines -->
+            <!-- Background -->
+            <g class="hover-sibling-bg no-pointer-events">
+                <line :x1="lens.x" :y1="-r" :x2="lens.x" :y2="-r * lens.aperture"></line>
+                <line :x1="lens.x" :y1="r" :x2="lens.x" :y2="r * lens.aperture"></line>
+            </g>
+            <!-- Foreground -->
+            <g class="hover-sibling no-pointer-events">
+                <line :x1="lens.x" :y1="-r" :x2="lens.x" :y2="-r * lens.aperture"></line>
+                <line :x1="lens.x" :y1="r" :x2="lens.x" :y2="r * lens.aperture"></line>
+            </g>
+            <!-- UI -->
+            <circle :cx="lens.x" :cy="r * lens.aperture" :r="rUI" @mousedown="apertureSizeChangeStartHandler"
+                class="hover-sibling-master ui-hidden"></circle>
+        </g>
     </g>
 </template>
\ No newline at end of file

From 8fd65c19da7fe4e6adf0948ac6b3be264b4a18fe Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 01:27:37 +0900
Subject: [PATCH 05/53] Single item

---
 src/Canvas.vue        | 202 +++++++++++++++++++++---------------------
 src/Controller.vue    |  22 ++---
 src/Preview.vue       |   2 +-
 src/SVG/Guideline.vue |   6 +-
 src/SVG/Lens.vue      |  27 ++++++
 src/SVG/SVG.vue       | 105 +---------------------
 src/globals.ts        |  41 +++------
 src/handlers.ts       | 100 +++------------------
 8 files changed, 171 insertions(+), 334 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 7e3b994..7160bbe 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { watch, onMounted, ref } from 'vue'
 
-import { state, lights, lens, sensor, sensorData, apple, options, style, lensR, infR } from './globals'
-import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, intersectionSS } from './math'
+import { state, lights, items, sensor, sensorData, apple, options, style, infR } from './globals'
+import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensR, intersectionSS } from './math'
 
 import { Light } from './type'
 
@@ -27,113 +27,120 @@ const drawSegment = (p: Vec, v: Vec, length: number) => {
   return q
 };
 
-const drawRay = (image: Vec, s0: Vec, s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
-  let innerLens = false
+const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
+  for (const lens of items.value) {
+    const s0 = s.copy()
+    const lensR = calcLensR(lens.f, lens.n, lens.d)
+    let innerLens = false
 
-  //--------------------------------
-  // Collision to lens surface (left-side)
-  //--------------------------------
-  if (!options.value.lensIdeal && options.value.lens) {
-    // Center of lens curvature circle
-    const c = vec(lens.value.x - lens.value.d / 2 + lensR.value, 0)
-
-    const p = getIntersectionLens(s, v, c, lens.value.r, lensR.value, true)
-    if (p) {
-      v = p.sub(s)
-      s = drawSegment(s, v, v.length())
+    // Find image position of the light source
+    const image = fGaussian(lens.f, lens.x - s.x, -s.y)
 
-      // Refraction (inner lens rays)
-      const phi1 = crossAngle(Vec.sub(p, c), Vec.sub(s0, p));
-      const phi2 = Math.asin(Math.sin(phi1) / lens.value.n);
-      const theta = Math.atan2(p.y - c.y, p.x - c.x) + Math.PI + phi2;
-      v = vecRad(theta)
+    //--------------------------------
+    // Collision to lens surface (left-side)
+    //--------------------------------
+    if (!options.value.lensIdeal && options.value.lens) {
+      // Center of lens curvature circle
+      const c = vec(lens.x - lens.d / 2 + lensR, 0)
 
-      innerLens = true
-    }
-  }
-
-  //--------------------------------
-  // Collision to aperture
-  //--------------------------------
-  if (options.value.aperture) {
-    const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.value.x, -lens.value.r), vec(lens.value.x, lens.value.r))
-    if (p) {
-      const upperHit = p.y > lens.value.aperture * lens.value.r
-      const lowerHit = p.y < -lens.value.aperture * lens.value.r
-      if (lowerHit || upperHit) {
+      const p = getIntersectionLens(s, v, c, lens.r, lensR, true)
+      if (p) {
         v = p.sub(s)
-        drawSegment(s, v, v.length())
-        return
-      }
-    }
-  }
+        s = drawSegment(s, v, v.length())
 
-  //--------------------------------
-  // Collision to lens surface (right-side)
-  //--------------------------------
-  if (!options.value.lensIdeal && innerLens) {
-    // Center of lens curvature circle
-    const c = vec(lens.value.x + lens.value.d / 2 - lensR.value, 0)
+        // Refraction (inner lens rays)
+        const phi1 = crossAngle(Vec.sub(p, c), Vec.sub(s0, p));
+        const phi2 = Math.asin(Math.sin(phi1) / lens.n);
+        const theta = Math.atan2(p.y - c.y, p.x - c.x) + Math.PI + phi2;
+        v = vecRad(theta)
 
-    const p = getIntersectionLens(s, v, c, lens.value.r, lensR.value, false)
-    if (p) {
-      v = p.sub(s)
-      const nextS = drawSegment(s, v, v.length())
-
-      // Refraction (inner lens rays)
-      const phi1 = crossAngle(Vec.sub(p, c), Vec.sub(p, s));
-      const phi2 = Math.asin(Math.sin(phi1) * lens.value.n);
-      const theta = Math.atan2(p.y - c.y, p.x - c.x) + phi2;
-      v = vecRad(theta)
-      s = nextS
+        innerLens = true
+      }
     }
-  }
-
-  //--------------------------------
-  // Collision to ideal lens
-  //--------------------------------
-  if (options.value.lensIdeal && options.value.lens) {
-    const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.value.x, -lens.value.r), vec(lens.value.x, lens.value.r))
-    if (p) {
-      v = p.sub(s)
-      s = drawSegment(s, v, v.length())
 
-      // Refracted ray
-      let theta = Math.atan2(image.y - s.y, image.x);
-      if (image.x === Infinity) {
-        theta = Math.atan2(-s0.y, -(s0.x - lens.value.x));
-      }
-      if (lens.value.x - lens.value.f < s0.x) {
-        theta += Math.PI;
+    //--------------------------------
+    // Collision to aperture
+    //--------------------------------
+    if (options.value.aperture) {
+      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.x, -lens.r), vec(lens.x, lens.r))
+      if (p) {
+        const upperHit = p.y > lens.aperture * lens.r
+        const lowerHit = p.y < -lens.aperture * lens.r
+        if (lowerHit || upperHit) {
+          v = p.sub(s)
+          drawSegment(s, v, v.length())
+          return
+        }
       }
-      v = vecRad(theta)
     }
-  }
 
-  //--------------------------------
-  // Collision to body
-  //--------------------------------
-  if (options.value.body) {
-    // Upper
-    {
-      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.value.x, -infR.value), vec(lens.value.x, -lens.value.r))
+    //--------------------------------
+    // Collision to lens surface (right-side)
+    //--------------------------------
+    if (!options.value.lensIdeal && innerLens) {
+      // Center of lens curvature circle
+      const c = vec(lens.x + lens.d / 2 - lensR, 0)
+
+      const p = getIntersectionLens(s, v, c, lens.r, lensR, false)
       if (p) {
         v = p.sub(s)
-        drawSegment(s, v, v.length())
-        return
+        const nextS = drawSegment(s, v, v.length())
+
+        // Refraction (inner lens rays)
+        const phi1 = crossAngle(Vec.sub(p, c), Vec.sub(p, s));
+        const phi2 = Math.asin(Math.sin(phi1) * lens.n);
+        const theta = Math.atan2(p.y - c.y, p.x - c.x) + phi2;
+        v = vecRad(theta)
+        s = nextS
       }
     }
-    // Lower
-    {
-      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.value.x, infR.value), vec(lens.value.x, lens.value.r))
+
+    //--------------------------------
+    // Collision to ideal lens
+    //--------------------------------
+    if (options.value.lensIdeal && options.value.lens) {
+      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.x, -lens.r), vec(lens.x, lens.r))
       if (p) {
         v = p.sub(s)
-        drawSegment(s, v, v.length())
-        return
+        s = drawSegment(s, v, v.length())
+
+        // Refracted ray
+        let theta = Math.atan2(image.y - s.y, image.x);
+        if (image.x === Infinity) {
+          theta = Math.atan2(-s0.y, -(s0.x - lens.x));
+        }
+        if (lens.x - lens.f < s0.x) {
+          theta += Math.PI;
+        }
+        v = vecRad(theta)
       }
     }
   }
 
+  //--------------------------------
+  // Collision to body
+  //--------------------------------
+  // if (options.value.body) {
+  //   // Upper
+  //   {
+  //     const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.value.x, -infR.value), vec(lens.value.x, -lens.value.r))
+  //     if (p) {
+  //       v = p.sub(s)
+  //       drawSegment(s, v, v.length())
+  //       return
+  //     }
+  //   }
+  //   // Lower
+  //   {
+  //     const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.value.x, infR.value), vec(lens.value.x, lens.value.r))
+  //     if (p) {
+  //       v = p.sub(s)
+  //       drawSegment(s, v, v.length())
+  //       return
+  //     }
+  //   }
+  // }
+
   //--------------------------------
   // Collision to sensor
   //--------------------------------
@@ -174,18 +181,15 @@ const draw = () => {
 
     // Point light source
     if (light.type === Light.Point) {
-      // Find image position of the light source
-      const image = fGaussian(lens.value.f, lens.value.x - light.c.x, -light.c.y)
 
       // Draw 2^nRaysLog rays from light center
       const nRays = (1 << params.nRaysLog);
       for (let i = 0; i < nRays; i++) {
         // Initial position and direction
         const s = light.c.copy()
-        const s0 = s.copy()
         const theta = 2 * Math.PI * i / nRays
         const v = vecRad(theta)
-        drawRay(image, s0, s, v, light.color, sensorDataTmp)
+        drawRay(s, v, light.color, sensorDataTmp)
       }
     }
 
@@ -198,11 +202,8 @@ const draw = () => {
       const nRays = Math.floor((length / (2 * Math.PI)) * (1 << params.nRaysLog) * 0.01)
       for (let i = 0; i < nRays; i++) {
         const s = light.s.add(ln.mul(i / nRays * length))
-        const s0 = s.copy()
-        // Find image position of the light source
-        const image = fGaussian(lens.value.f, lens.value.x - s.x, -s.y)
         const v = l.rotate(-Math.PI / 2)
-        drawRay(image, s0, s, v, light.color, sensorDataTmp)
+        drawRay(s, v, light.color, sensorDataTmp)
       }
     }
   }
@@ -212,19 +213,14 @@ const draw = () => {
     for (const light of apple.value) {
       ctx.strokeStyle = `hsl(${light.color}, 100%, 50%, ${style.value.rayIntensity})`
       ctx.lineWidth = style.value.rayWidth
-
-      // Find image position of the light source
-      const image = fGaussian(lens.value.f, lens.value.x - light.c.x, -light.c.y)
-
       // Draw 2^nRaysLog rays from light center
       const nRays = (1 << params.nRaysLog);
       for (let i = 0; i < nRays; i++) {
         // Initial position and direction
         const s = vec(light.c.x, light.c.y)
-        const s0 = s.copy()
         const theta = 2 * Math.PI * i / nRays
         const v = vecRad(theta)
-        drawRay(image, s0, s, v, light.color, sensorDataTmp)
+        drawRay(s, v, light.color, sensorDataTmp)
       }
     }
   }
@@ -246,7 +242,7 @@ onMounted(() => {
 })
 
 // TODO: Optimize here ('deep' is enabled)
-watch([state, lights, apple, lens, sensor, options, style], () => {
+watch([state, lights, apple, items, sensor, options, style], () => {
   canvas.value.width = state.value.width
   canvas.value.height = state.value.height
   offscreenCanvas.width = state.value.width
diff --git a/src/Controller.vue b/src/Controller.vue
index 0ca29c3..5973c17 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { state, lights, lens, sensor, appleProps, options, style, lensR, fNumber } from './globals'
+import { state, sensor, appleProps, options, style } from './globals'
 import { humanReadable } from './utils';
 import { Light } from "./type"
 
@@ -80,21 +80,21 @@ const nRays = computed(() => {
         </tr> -->
         <template v-if="options.lens">
             <template v-if="options.advanced">
-                <tr>
+                <!-- <tr>
                     <td><label><input type="checkbox" v-model="options.curvature"> Curvature</label></td>
                     <td></td>
                     <td>{{ humanReadable(lensR) }}</td>
-                </tr>
+                </tr> -->
                 <tr>
                     <td><label><input type="checkbox" v-model="options.lensIdeal"> Ideal lens</label></td>
                 </tr>
-                <tr>
+                <!-- <tr>
                     <td>Refractive index</td>
                     <td><input type="range" min="1.01" max="3" step="0.001" v-model.number="lens.n"></td>
                     <td>{{ humanReadable(lens.n) }}</td>
-                </tr>
+                </tr> -->
             </template>
-            <tr>
+            <!-- <tr>
                 <td>Focal Length</td>
                 <td></td>
                 <td>{{ humanReadable(lens.f) }}</td>
@@ -103,8 +103,8 @@ const nRays = computed(() => {
                 <td>F-number</td>
                 <td></td>
                 <td>{{ humanReadable(fNumber) }}</td>
-            </tr>
-            <template v-if="options.advanced">
+            </tr> -->
+            <!-- <template v-if="options.advanced">
                 <tr>
                     <td>Position</td>
                     <td></td>
@@ -120,7 +120,7 @@ const nRays = computed(() => {
                     <td></td>
                     <td>{{ humanReadable(lens.d) }}</td>
                 </tr>
-            </template>
+            </template> -->
         </template>
         <!-- Screen -->
         <tr>
@@ -227,7 +227,7 @@ const nRays = computed(() => {
                     <hr>Templates
                 </th>
             </tr>
-            <tr>
+            <!-- <tr>
                 <td>Focal length</td>
                 <td>
                     <button @click="lens.f = 12">12</button>
@@ -240,7 +240,7 @@ const nRays = computed(() => {
                     <button @click="lens.f = 200">200</button>
                 </td>
                 <td></td>
-            </tr>
+            </tr> -->
             <tr>
                 <td>Sensor height</td>
                 <td>
diff --git a/src/Preview.vue b/src/Preview.vue
index 9eedaec..ecbddb7 100644
--- a/src/Preview.vue
+++ b/src/Preview.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { watch, onMounted, ref } from 'vue'
 
-import { state, sensor, sensorData, options, style, memoryCanvasCtx, lens } from './globals'
+import { state, sensor, sensorData, options, style, memoryCanvasCtx } from './globals'
 
 // Reference to the canvas
 const canvas = ref()
diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index 512186c..9227003 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { lens, sensor, options, infR } from '../globals'
+import { items, sensor, options, infR } from '../globals'
 
 import { vec, fGaussian } from '../math'
 
+const lens = computed(() => {
+    return items.value[0]
+})
+
 // Effective lens radius
 const re = computed(() => {
     if (options.value.aperture) {
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 99bf488..dcec357 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -72,6 +72,14 @@ const apertureSizeChangeStartHandler = (e: any) => {
     })
 }
 
+const fNumber = computed(() => {
+    if (options.value.aperture) {
+        return props.lens.f / (2 * props.lens.r * props.lens.aperture)
+    } else {
+        return props.lens.f / (2 * props.lens.r)
+    }
+})
+
 const rMax = computed(() => {
     const d = props.lens.d
     return Math.sqrt(R.value * R.value - (R.value - d / 2) * (R.value - d / 2))
@@ -97,6 +105,25 @@ const rightX = computed(() => {
 
 <template>
     <g>
+        <!-- Curvature circle -->
+        <g v-if="options.lens && options.curvature">
+            <circle :cx="lens.x + lens.d / 2 - R" :cy="0" :r="R" class="dotted"></circle>
+            <circle :cx="lens.x - lens.d / 2 + R" :cy="0" :r="R" class="dotted"></circle>
+            <!-- center point -->
+            <circle :cx="lens.x + lens.d / 2 - R" cy="0" :r="rUI / 2" class="white"></circle>
+            <circle :cx="lens.x - lens.d / 2 + R" cy="0" :r="rUI / 2" class="white"></circle>
+        </g>
+
+        <!-- Hyperfocal point -->
+        <g
+            v-if="options.lens && options.sensor && options.circleOfConfusion && options.angleOfView && options.depthOfField && options.hyperfocalPoint">
+            <circle :cx="lens.x - lens.f - lens.f * lens.f / (sensor.circleOfConfusion * fNumber)" cy="0"
+                :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
+            <circle :cx="lens.x - lens.f - lens.f * lens.f / (sensor.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2"
+                class="white"></circle>
+        </g>
+
+        <!-- Lens -->
         <g class="hover-parent">
             <!-- Background -->
             <g class="hover-child-bg fill-none">
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 63a97c7..6e054d6 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import { state, lights, lens, items, sensor, style, apple, options, lensR, infR, fNumber, rUI } from '../globals'
+import { state, lights, items, sensor, style, apple, options, infR, rUI } from '../globals'
 import * as h from '../handlers'
 import { Light } from '../type'
 
@@ -64,87 +64,9 @@ const strokeDashArray = computed(() => {
     <!-- Grid -->
     <Grid v-if="options.grid"></Grid>
 
-    <!-- Curvature -->
-    <g v-if="options.lens && options.curvature">
-      <circle :cx="lens.x + lens.d / 2 - lensR" :cy="0" :r="lensR" class="dotted"></circle>
-      <circle :cx="lens.x - lens.d / 2 + lensR" :cy="0" :r="lensR" class="dotted"></circle>
-      <!-- center point -->
-      <circle :cx="lens.x + lens.d / 2 - lensR" cy="0" :r="rUI / 2" class="white"></circle>
-      <circle :cx="lens.x - lens.d / 2 + lensR" cy="0" :r="rUI / 2" class="white"></circle>
-    </g>
-
     <!-- Guidelines -->
     <Guideline v-if="options.lens && options.sensor && options.angleOfView"></Guideline>
 
-    <!-- Hyperfocal point -->
-    <g
-      v-if="options.lens && options.sensor && options.circleOfConfusion && options.angleOfView && options.depthOfField && options.hyperfocalPoint">
-      <circle :cx="lens.x - lens.f - lens.f * lens.f / (sensor.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2 * 1.2"
-        :fill="style.lineBgColor"></circle>
-      <circle :cx="lens.x - lens.f - lens.f * lens.f / (sensor.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2"
-        class="white"></circle>
-    </g>
-
-    <!-- Lens and Sensor move dummy element-->
-    <g v-if="options.lens && options.sensor" class="hover-parent">
-      <!-- lens -->
-      <!-- <path :d="`M ${lens.x} ${-lens.r} A ${lensR} ${lensR} 0 0 0 ${lens.x} ${lens.r}`" class="hover-child fill-none" />
-      <path :d="`M ${lens.x} ${-lens.r} A ${lensR} ${lensR} 0 0 1 ${lens.x} ${lens.r}`" class="hover-child fill-none" /> -->
-      <!-- sensor -->
-      <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="hover-child" />
-      <!-- dummy for ui -->
-      <rect class="ui-transparent" :x="lens.x" :y="-Math.max(lens.r, sensor.r)" :width="sensor.x - lens.x"
-        :height="2 * Math.max(lens.r, sensor.r)" @mousedown="h.cameraMoveStartHandler" />
-    </g>
-
-    <!-- Lens -->
-    <g v-if="options.lens">
-      <g class="hover-parent">
-        <!-- left half background -->
-        <path
-          :d="`M ${lens.x - lens.d / 2 + (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${-lens.r} A ${lensR} ${lensR} 0 0 0 ${lens.x - lens.d / 2 + (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${lens.r}`"
-          class="hover-child-bg fill-none" />
-        <!-- right half background -->
-        <path
-          :d="`M ${lens.x + lens.d / 2 - (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${-lens.r} A ${lensR} ${lensR} 0 0 1 ${lens.x + lens.d / 2 - (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${lens.r}`"
-          class="hover-child-bg fill-none" />
-        <!-- left half -->
-        <path
-          :d="`M ${lens.x - lens.d / 2 + (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${-lens.r} A ${lensR} ${lensR} 0 0 0 ${lens.x - lens.d / 2 + (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${lens.r}`"
-          class="hover-child fill-none" />
-        <!-- right half -->
-        <path
-          :d="`M ${lens.x + lens.d / 2 - (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${-lens.r} A ${lensR} ${lensR} 0 0 1 ${lens.x + lens.d / 2 - (lensR - Math.sqrt(lensR * lensR - lens.r * lens.r))} ${lens.r}`"
-          class="hover-child fill-none" />
-        <!-- dummy for ui -->
-        <rect class='ui-transparent' :x="lens.x - lens.d / 2" :y="-lens.r" :width="lens.d" :height="2 * lens.r"
-          @mousedown="h.lensMoveStartHandler" />
-      </g>
-      <!-- Focal points -->
-      <g v-if="options.lensFocalPoints">
-        <!-- left hand -->
-        <g>
-          <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-          <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2" class="white"></circle>
-          <!-- UI -->
-          <circle :cx="lens.x - lens.f" cy="0" :r="rUI" @mousedown="h.focalPointMoveStartHandler" class="ui-hidden">
-          </circle>
-        </g>
-        <!-- right hand -->
-        <circle :cx="lens.x + lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-        <circle :cx="lens.x + lens.f" cy="0" :r="rUI / 2" class="white"></circle>
-
-        <!-- Double focal points -->
-        <g v-if="options.lensDoubleFocalPoints">
-          <circle :cx="lens.x - 2 * lens.f" cy="0" :r="rUI / 2" class="white"></circle>
-          <circle :cx="lens.x + 2 * lens.f" cy="0" :r="rUI / 2" class="white"></circle>
-        </g>
-      </g>
-      <!-- Lens size change UI-->
-      <circle :cx="lens.x" :cy="-lens.r" :r="rUI" class="ui-hidden" @mousedown="h.lensSizeChangeStartHandler">
-      </circle>
-    </g>
-
     <!-- Items -->
     <g v-if="options.lens">
       <g v-for="(item, idx) in items">
@@ -152,25 +74,6 @@ const strokeDashArray = computed(() => {
       </g>
     </g>
 
-    <!-- Aperture -->
-    <g v-if="options.aperture">
-      <!-- Lines -->
-      <line :x1="lens.x" :y1="-lens.r" :x2="lens.x" :y2="-lens.r * lens.aperture"
-        class="hover-sibling-bg no-pointer-events">
-      </line>
-      <line :x1="lens.x" :y1="lens.r" :x2="lens.x" :y2="lens.r * lens.aperture"
-        class="hover-sibling-bg no-pointer-events">
-      </line>
-      <line :x1="lens.x" :y1="-lens.r" :x2="lens.x" :y2="-lens.r * lens.aperture"
-        class="hover-sibling no-pointer-events">
-      </line>
-      <line :x1="lens.x" :y1="lens.r" :x2="lens.x" :y2="lens.r * lens.aperture" class="hover-sibling no-pointer-events">
-      </line>
-      <!-- UI -->
-      <circle :cx="lens.x" :cy="lens.r * lens.aperture" :r="rUI" @mousedown="h.apertureSizeChangeStartHandler"
-        class="hover-sibling-master ui-hidden"></circle>
-    </g>
-
     <!-- Apple -->
     <g v-if="options.apple">
       <g v-for="(light, idx) of apple">
@@ -194,12 +97,6 @@ const strokeDashArray = computed(() => {
       </g>
     </g>
 
-    <!-- Body -->
-    <g v-if="options.body">
-      <line :x1="lens.x" :y1="lens.r" :x2="lens.x" :y2="infR" class="white thick" />
-      <line :x1="lens.x" :y1="-lens.r" :x2="lens.x" :y2="-infR" class="white thick" />
-    </g>
-
     <!-- Sensor -->
     <g v-if="options.sensor">
       <g class="hover-parent">
diff --git a/src/globals.ts b/src/globals.ts
index fa8aad7..1d8687b 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -37,30 +37,13 @@ export const lights0 = ():
 }
 export const lights = ref(lights0())
 
-//--------------------------------
-// Lens
-//--------------------------------
-
-export const lens0 = () => {
-    return {
-        x: 0,
-        r: 20,
-        n: 1.5,
-        f: 50,
-        d: 5,
-        aperture: 1,
-    }
-}
-export const lens = ref(lens0())
-
 //--------------------------------
 // Items
 //--------------------------------
 
 export const items0 = () => {
     return [
-        { x: -50, r: 20, f: 50, n: 1.5, d: 5, aperture: 1 },
-        { x: -100, r: 12, f: 100, n: 1.5, d: 5, aperture: 1 },
+        { x: 0, r: 20, f: 50, n: 1.5, d: 5, aperture: 1 },
     ]
 }
 export const items = ref(items0())
@@ -196,10 +179,6 @@ export const style = ref(style0())
 // Computed
 //================================
 
-export const lensR = computed(() => {
-    return calcLensR(lens.value.f, lens.value.n, lens.value.d)
-})
-
 export const infR = computed(() => {
     // Screen diagonal length
     const w = state.value.width / state.value.scale;
@@ -224,12 +203,20 @@ export const infR = computed(() => {
     return (screen + distanceMax) * 3 /* 3 for safety */;
 })
 
-export const fNumber = computed(() => {
-    if (options.value.aperture) {
-        return lens.value.f / (2 * lens.value.r * lens.value.aperture)
-    } else {
-        return lens.value.f / (2 * lens.value.r)
+export const minLensX = computed(() => {
+    let minX = infR.value
+    for (const lens of items.value) {
+        minX = Math.min(minX, lens.x - lens.d / 2)
+    }
+    return minX
+})
+
+export const maxLensX = computed(() => {
+    let maxX = -infR.value
+    for (const lens of items.value) {
+        maxX = Math.min(maxX, lens.x)
     }
+    return maxX
 })
 
 export const maxLightX = computed(() => {
diff --git a/src/handlers.ts b/src/handlers.ts
index 60764e1..6593eaa 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import { state, lights, lens, sensor, maxLightX } from "./globals";
+import { state, lights, sensor, minLensX, maxLensX } from "./globals";
 import { Light } from './type'
 import { vec, Vec } from './math'
 
@@ -85,15 +85,14 @@ export const lightMoveStartHandler = (e: any, idx: number) => {
     })
     newLights.push(light)
     lights.value = newLights
-    const minLensX = lens.value.x - lens.value.d / 2
 
     if (light.type === Light.Point) {
         const m0 = getPositionOnSvg(e);
         const c0 = light.c.copy()
         moveHandler = (e_: any) => {
             const d = getPositionDiffOnSvgApp(e_, m0)
-            if (c0.x + d.x > minLensX) {
-                light.c.x = minLensX
+            if (c0.x + d.x > minLensX.value) {
+                light.c.x = minLensX.value
             } else {
                 light.c.x = c0.x + d.x
             }
@@ -107,12 +106,12 @@ export const lightMoveStartHandler = (e: any, idx: number) => {
             const d = getPositionDiffOnSvgApp(e_, m0)
             const sn = s0.add(d)
             const tn = t0.add(d)
-            if (s0.x >= t0.x && sn.x > minLensX) {
-                sn.x = minLensX
-                tn.x = minLensX + (t0.x - s0.x)
-            } else if (t0.x > s0.x && tn.x > minLensX) {
-                sn.x = minLensX + (s0.x - t0.x)
-                tn.x = minLensX
+            if (s0.x >= t0.x && sn.x > minLensX.value) {
+                sn.x = minLensX.value
+                tn.x = minLensX.value + (t0.x - s0.x)
+            } else if (t0.x > s0.x && tn.x > minLensX.value) {
+                sn.x = minLensX.value + (s0.x - t0.x)
+                tn.x = minLensX.value
             }
             light.s = sn
             light.t = tn
@@ -135,8 +134,8 @@ export const parallelLightNodeMoveStartHandler = (e: any, idx: number, which: st
         const p = which === "s" ? light.s : light.t
         moveHandler = (e_: any) => {
             const d = getPositionDiffOnSvgApp(e_, m0)
-            if (p0.x + d.x > lens.value.x - lens.value.d / 2) {
-                p.x = lens.value.x - lens.value.d / 2
+            if (p0.x + d.x > minLensX.value) {
+                p.x = minLensX.value
             } else {
                 p.x = p0.x + d.x
             }
@@ -144,87 +143,14 @@ export const parallelLightNodeMoveStartHandler = (e: any, idx: number, which: st
         }
     }
 }
-export const cameraMoveStartHandler = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    const m0 = getPositionOnSvg(e);
-    const lensX0 = lens.value.x;
-    const sensorX0 = sensor.value.x;
-    moveHandler = (e_: any) => {
-        const d = getPositionDiffOnSvgApp(e_, m0)
-        if (lensX0 + d.x < maxLightX.value) {
-            lens.value.x = maxLightX.value
-            sensor.value.x = maxLightX.value + (sensorX0 - lensX0)
-        } else {
-            lens.value.x = lensX0 + d.x
-            sensor.value.x = sensorX0 + d.x
-        }
-    }
-}
-export const lensMoveStartHandler = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    const m0 = getPositionOnSvg(e);
-    const cx0 = lens.value.x;
-    moveHandler = (e_: any) => {
-        const d = getPositionDiffOnSvgApp(e_, m0)
-        if (cx0 + d.x < maxLightX.value + lens.value.d / 2) {
-            lens.value.x = maxLightX.value + lens.value.d / 2
-        } else if (sensor.value.x < cx0 + d.x) {
-            lens.value.x = sensor.value.x
-        } else {
-            lens.value.x = cx0 + d.x
-        }
-    }
-}
-export const lensSizeChangeStartHandler = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    const m0 = getPositionOnSvg(e);
-    const r0 = lens.value.r;
-    moveHandler = (e_: any) => {
-        const d = getPositionDiffOnSvgApp(e_, m0)
-        if (r0 - d.y < 0.1) {
-            lens.value.r = 0.1;
-        } else {
-            lens.value.r = r0 - d.y;
-        }
-    }
-}
-export const focalPointMoveStartHandler = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    const m0 = getPositionOnSvg(e);
-    const f0 = lens.value.f;
-    moveHandler = (e_: any) => {
-        const d = getPositionDiffOnSvgApp(e_, m0)
-        if (f0 - d.x < lens.value.d / 2) {
-            lens.value.f = lens.value.d / 2
-        } else {
-            lens.value.f = f0 - d.x
-        }
-    }
-}
-export const apertureSizeChangeStartHandler = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    const m0 = getPositionOnSvg(e);
-    const a0 = lens.value.aperture * lens.value.r;
-    moveHandler = (e_: any) => {
-        const d = getPositionDiffOnSvgApp(e_, m0)
-        const an = (a0 + d.y) / lens.value.r;
-        if (an < 0) {
-            lens.value.aperture = 0;
-        } else if (an > 1) {
-            lens.value.aperture = 1;
-        } else {
-            lens.value.aperture = an;
-        }
-    }
-}
 export const sensorMoveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
     const cx0 = sensor.value.x;
     moveHandler = (e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (cx0 + d.x < lens.value.x) {
-            sensor.value.x = lens.value.x
+        if (cx0 + d.x < maxLensX.value) {
+            sensor.value.x = maxLensX.value
         } else {
             sensor.value.x = cx0 + d.x
         }

From 45263fe5c471b204bbc5446de83ad340cf970b1c Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 01:38:32 +0900
Subject: [PATCH 06/53] Lens sort

---
 src/Canvas.vue | 6 +++++-
 src/globals.ts | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 7160bbe..e27cbe9 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -28,7 +28,11 @@ const drawSegment = (p: Vec, v: Vec, length: number) => {
 };
 
 const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
-  for (const lens of items.value) {
+
+  // Multiple lens
+  const lenses = items.value.filter(() => true)
+  lenses.sort((a, b) => { return a.x - b.x })
+  for (const lens of lenses) {
     const s0 = s.copy()
     const lensR = calcLensR(lens.f, lens.n, lens.d)
     let innerLens = false
diff --git a/src/globals.ts b/src/globals.ts
index 1d8687b..ff632f8 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -43,7 +43,8 @@ export const lights = ref(lights0())
 
 export const items0 = () => {
     return [
-        { x: 0, r: 20, f: 50, n: 1.5, d: 5, aperture: 1 },
+        { x: -50, r: 10, f: 50, n: 1.5, d: 5, aperture: 1 },
+        { x: 0, r: 10, f: 50, n: 1.5, d: 5, aperture: 1 },
     ]
 }
 export const items = ref(items0())

From cb450ed26f6751ed39b687503851fa1e6d661d9a Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 06:27:13 +0900
Subject: [PATCH 07/53] Fix lensR calculation

---
 src/math.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/math.ts b/src/math.ts
index 0457e45..e8df8ca 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -218,8 +218,8 @@ export const fGaussian = (f: number, px: number, py: number) => {
 }
 
 export const calcLensR = (f: number, n: number, d: number) => {
-    const a = 1
-    const b = -2 * f * (n - 1)
-    const c = d * (n - 1) * (n - 1)
+    const a = n
+    const b = -2 * f * n * (n - 1)
+    const c = d * f * (n - 1) * (n - 1)
     return (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a)
 }
\ No newline at end of file

From f9c2e92a4a72e4ef33686fe838bd3365e7aad767 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 15:09:42 +0900
Subject: [PATCH 08/53] Change lens parameters

---
 src/Canvas.vue        |  26 +++---
 src/SVG/Guideline.vue |  83 ++++++++++---------
 src/SVG/Lens.vue      | 181 +++++++++++++++++++++++-------------------
 src/globals.ts        |  15 ++--
 src/math.ts           |  14 ++--
 src/type.ts           |  11 +++
 6 files changed, 181 insertions(+), 149 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index e27cbe9..d1eb9f7 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -2,7 +2,7 @@
 import { watch, onMounted, ref } from 'vue'
 
 import { state, lights, items, sensor, sensorData, apple, options, style, infR } from './globals'
-import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensR, intersectionSS } from './math'
+import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS } from './math'
 
 import { Light } from './type'
 
@@ -31,23 +31,25 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
 
   // Multiple lens
   const lenses = items.value.filter(() => true)
-  lenses.sort((a, b) => { return a.x - b.x })
+  lenses.sort((a, b) => { return a.x1 - b.x1 })
   for (const lens of lenses) {
     const s0 = s.copy()
-    const lensR = calcLensR(lens.f, lens.n, lens.d)
+    const xm = (lens.x1 + lens.x2) / 2
+    const f = calcLensF(lens)
     let innerLens = false
 
     // Find image position of the light source
-    const image = fGaussian(lens.f, lens.x - s.x, -s.y)
+    // TODO:
+    const image = fGaussian(f, xm - s.x, -s.y)
 
     //--------------------------------
     // Collision to lens surface (left-side)
     //--------------------------------
     if (!options.value.lensIdeal && options.value.lens) {
       // Center of lens curvature circle
-      const c = vec(lens.x - lens.d / 2 + lensR, 0)
+      const c = vec(lens.x1 + lens.R1, 0)
 
-      const p = getIntersectionLens(s, v, c, lens.r, lensR, true)
+      const p = getIntersectionLens(s, v, c, lens.r, Math.abs(lens.R1), true)
       if (p) {
         v = p.sub(s)
         s = drawSegment(s, v, v.length())
@@ -66,7 +68,7 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     // Collision to aperture
     //--------------------------------
     if (options.value.aperture) {
-      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.x, -lens.r), vec(lens.x, lens.r))
+      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(xm, -lens.r), vec(xm, lens.r))
       if (p) {
         const upperHit = p.y > lens.aperture * lens.r
         const lowerHit = p.y < -lens.aperture * lens.r
@@ -83,9 +85,9 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     //--------------------------------
     if (!options.value.lensIdeal && innerLens) {
       // Center of lens curvature circle
-      const c = vec(lens.x + lens.d / 2 - lensR, 0)
+      const c = vec(lens.x2 + lens.R2, 0)
 
-      const p = getIntersectionLens(s, v, c, lens.r, lensR, false)
+      const p = getIntersectionLens(s, v, c, lens.r, Math.abs(lens.R2), false)
       if (p) {
         v = p.sub(s)
         const nextS = drawSegment(s, v, v.length())
@@ -103,7 +105,7 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     // Collision to ideal lens
     //--------------------------------
     if (options.value.lensIdeal && options.value.lens) {
-      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.x, -lens.r), vec(lens.x, lens.r))
+      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(xm, -lens.r), vec(xm, lens.r))
       if (p) {
         v = p.sub(s)
         s = drawSegment(s, v, v.length())
@@ -111,9 +113,9 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
         // Refracted ray
         let theta = Math.atan2(image.y - s.y, image.x);
         if (image.x === Infinity) {
-          theta = Math.atan2(-s0.y, -(s0.x - lens.x));
+          theta = Math.atan2(-s0.y, -(s0.x - xm));
         }
-        if (lens.x - lens.f < s0.x) {
+        if (xm - f < s0.x) {
           theta += Math.PI;
         }
         v = vecRad(theta)
diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index 9227003..55ec066 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -2,12 +2,20 @@
 import { computed } from 'vue'
 import { items, sensor, options, infR } from '../globals'
 
-import { vec, fGaussian } from '../math'
+import { vec, fGaussian, calcLensF } from '../math'
 
 const lens = computed(() => {
     return items.value[0]
 })
 
+const x = computed(() => {
+    return (lens.value.x1 + lens.value.x2) / 2
+})
+
+const f = computed(() => {
+    return calcLensF(lens.value)
+})
+
 // Effective lens radius
 const re = computed(() => {
     if (options.value.aperture) {
@@ -19,19 +27,17 @@ const re = computed(() => {
 
 // Focal plane
 const focal = computed(() => {
-    const f = lens.value.f;
-
-    const bx = sensor.value.x - lens.value.x;
+    const bx = sensor.value.x - x.value;
     const by = sensor.value.r
 
-    const a = fGaussian(lens.value.f, bx, by)
+    const a = fGaussian(f.value, bx, by)
 
-    return { x: lens.value.x - a.x, d: a.y }
+    return { x: x.value - a.x, d: a.y }
 })
 
 // Angle of view
 const aov = computed(() => {
-    const lensTop = vec(lens.value.x, -re.value)
+    const lensTop = vec(x.value, -re.value)
 
     const focalPlaneTop = vec(focal.value.x, -focal.value.d)
     const focalPlaneBottom = vec(focal.value.x, focal.value.d)
@@ -40,13 +46,13 @@ const aov = computed(() => {
     let middleOuter = focalPlaneTop.sub(lensTop)
     let middleInner = focalPlaneBottom.sub(lensTop)
     // For over infinity modification
-    if (lens.value.x + lens.value.f > sensor.value.x) {
+    if (x.value + f.value > sensor.value.x) {
         middleOuter = middleOuter.minus().normalize().mul(infR.value)
         middleInner = middleInner.minus().normalize().mul(infR.value)
     }
-    if (lens.value.x + lens.value.f === sensor.value.x) {
-        middleOuter = vec(lens.value.x - sensor.value.x, -sensor.value.r).normalize().mul(infR.value)
-        middleInner = vec(lens.value.x - sensor.value.x, sensor.value.r).normalize().mul(infR.value)
+    if (x.value + f.value === sensor.value.x) {
+        middleOuter = vec(x.value - sensor.value.x, -sensor.value.r).normalize().mul(infR.value)
+        middleInner = vec(x.value - sensor.value.x, sensor.value.r).normalize().mul(infR.value)
     }
 
     // Focal plane to infinity
@@ -58,21 +64,20 @@ const aov = computed(() => {
 
 // Depth of field
 const dof = computed(() => {
-    const f = lens.value.f
     const r = re.value
     const delta = sensor.value.circleOfConfusion
 
-    const bx = sensor.value.x - lens.value.x
+    const bx = sensor.value.x - x.value
     const by = sensor.value.r // Unused
-    const a = fGaussian(f, bx, by)
+    const a = fGaussian(f.value, bx, by)
 
     // Image space
     const bFront = bx / (1 + delta / (2 * r)) // Lens side
     const bBack = bx / (1 - delta / (2 * r))
 
     // Object space
-    const aFront = 1 / (1 / f - 1 / bFront)
-    const aBack = 1 / (1 / f - 1 / bBack) // Lens side
+    const aFront = 1 / (1 / f.value - 1 / bFront)
+    const aBack = 1 / (1 / f.value - 1 / bBack) // Lens side
 
     // Radius of planes
     const c = a.x * (re.value / (re.value + focal.value.d))
@@ -88,34 +93,31 @@ const dof = computed(() => {
 
 <template>
     <!-- Inside camera -->
-    <line :x1="sensor.x" :y1="sensor.r" :x2="lens.x" :y2="re" class="dotted-bg"></line>
-    <line :x1="sensor.x" :y1="-sensor.r" :x2="lens.x" :y2="-re" class="dotted-bg"></line>
-    <line :x1="sensor.x" :y1="sensor.r" :x2="lens.x" :y2="re" class="dotted"></line>
-    <line :x1="sensor.x" :y1="-sensor.r" :x2="lens.x" :y2="-re" class="dotted"></line>
-    <g v-if="lens.x !== sensor.x">
+    <line :x1="sensor.x" :y1="sensor.r" :x2="x" :y2="re" class="dotted-bg"></line>
+    <line :x1="sensor.x" :y1="-sensor.r" :x2="x" :y2="-re" class="dotted-bg"></line>
+    <line :x1="sensor.x" :y1="sensor.r" :x2="x" :y2="re" class="dotted"></line>
+    <line :x1="sensor.x" :y1="-sensor.r" :x2="x" :y2="-re" class="dotted"></line>
+    <g v-if="x !== sensor.x">
         <!-- Lens to focal plane (outer) -->
-        <line :x1="lens.x" :y1="-re" :x2="lens.x + aov.middleOuter.x" :y2="-re + aov.middleOuter.y" class="dotted-bg">
+        <line :x1="x" :y1="-re" :x2="x + aov.middleOuter.x" :y2="-re + aov.middleOuter.y" class="dotted-bg">
         </line>
-        <line :x1="lens.x" :y1="re" :x2="lens.x + aov.middleOuter.x" :y2="re - aov.middleOuter.y" class="dotted-bg">
+        <line :x1="x" :y1="re" :x2="x + aov.middleOuter.x" :y2="re - aov.middleOuter.y" class="dotted-bg">
         </line>
-        <line :x1="lens.x" :y1="-re" :x2="lens.x + aov.middleOuter.x" :y2="-re + aov.middleOuter.y" class="dotted">
+        <line :x1="x" :y1="-re" :x2="x + aov.middleOuter.x" :y2="-re + aov.middleOuter.y" class="dotted">
         </line>
-        <line :x1="lens.x" :y1="re" :x2="lens.x + aov.middleOuter.x" :y2="re - aov.middleOuter.y" class="dotted"></line>
+        <line :x1="x" :y1="re" :x2="x + aov.middleOuter.x" :y2="re - aov.middleOuter.y" class="dotted"></line>
         <!-- Lens to focal plane (inner) -->
-        <line :x1="lens.x" :y1="-re" :x2="lens.x + aov.middleInner.x" :y2="-re + aov.middleInner.y"
-            class="dotted-thick-bg">
+        <line :x1="x" :y1="-re" :x2="x + aov.middleInner.x" :y2="-re + aov.middleInner.y" class="dotted-thick-bg">
         </line>
-        <line :x1="lens.x" :y1="re" :x2="lens.x + aov.middleInner.x" :y2="re - aov.middleInner.y"
-            class="dotted-thick-bg">
+        <line :x1="x" :y1="re" :x2="x + aov.middleInner.x" :y2="re - aov.middleInner.y" class="dotted-thick-bg">
         </line>
-        <line :x1="lens.x" :y1="-re" :x2="lens.x + aov.middleInner.x" :y2="-re + aov.middleInner.y"
-            class="dotted-thick">
+        <line :x1="x" :y1="-re" :x2="x + aov.middleInner.x" :y2="-re + aov.middleInner.y" class="dotted-thick">
         </line>
-        <line :x1="lens.x" :y1="re" :x2="lens.x + aov.middleInner.x" :y2="re - aov.middleInner.y" class="dotted-thick">
+        <line :x1="x" :y1="re" :x2="x + aov.middleInner.x" :y2="re - aov.middleInner.y" class="dotted-thick">
         </line>
     </g>
     <!-- Non over infinity -->
-    <g v-if="lens.x + lens.f < sensor.x">
+    <g v-if="x + f < sensor.x">
         <!-- Focal plane -->
         <line :x1="focal.x" :y1="-focal.d" :x2="focal.x" :y2="focal.d" class="dotted-bg"></line>
         <line :x1="focal.x" :y1="-focal.d" :x2="focal.x" :y2="focal.d" class="dotted"></line>
@@ -141,18 +143,15 @@ const dof = computed(() => {
 
         <!-- Depth of field -->
         <g v-if="options.circleOfConfusion && options.depthOfField">
-            <line :x1="lens.x - dof.inner.x" :y1="-dof.inner.d" :x2="lens.x - dof.inner.x" :y2="dof.inner.d"
+            <line :x1="x - dof.inner.x" :y1="-dof.inner.d" :x2="x - dof.inner.x" :y2="dof.inner.d"
                 class="dotted-thick-bg"></line>
-            <line :x1="lens.x - dof.outer.x" :y1="-dof.outer.d" :x2="lens.x - dof.outer.x" :y2="dof.outer.d"
+            <line :x1="x - dof.outer.x" :y1="-dof.outer.d" :x2="x - dof.outer.x" :y2="dof.outer.d"
                 class="dotted-thick-bg"></line>
-            <line :x1="lens.x - dof.inner.x" :y1="-dof.inner.d" :x2="lens.x - dof.inner.x" :y2="dof.inner.d"
-                class="dotted-thick"></line>
-            <line :x1="lens.x - dof.outer.x" :y1="-dof.outer.d" :x2="lens.x - dof.outer.x" :y2="dof.outer.d"
-                class="dotted-thick"></line>
+            <line :x1="x - dof.inner.x" :y1="-dof.inner.d" :x2="x - dof.inner.x" :y2="dof.inner.d" class="dotted-thick">
+            </line>
+            <line :x1="x - dof.outer.x" :y1="-dof.outer.d" :x2="x - dof.outer.x" :y2="dof.outer.d" class="dotted-thick">
+            </line>
         </g>
 
     </g>
-    <!-- Over infinity -->
-    <g v-else>
-    </g>
 </template>
\ No newline at end of file
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index dcec357..454c6da 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -1,59 +1,73 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { state, infR, items, sensor, options, style, rUI, maxLightX } from '../globals'
-import { vec, Vec, calcLensR } from '../math'
+import { computed } from 'vue'
+import { items, sensor, options, style, rUI, maxLightX } from '../globals'
+import { calcLensF } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
+import type { Lens } from '../type'
 
-const props = defineProps(['lens', 'idx'])
+// const props = defineProps(['lens', 'idx'])
+const props = defineProps<{
+    lens: Lens
+    idx: number
+}>()
 
-const R = computed(() => {
-    return calcLensR(props.lens.f, props.lens.n, props.lens.d)
+const f = computed(() => {
+    return calcLensF(props.lens)
+})
+
+const d = computed(() => {
+    return props.lens.x2 - props.lens.x1
+})
+
+const xm = computed(() => {
+    return (props.lens.x1 + props.lens.x2) / 2
 })
 
 const moveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
-    const cx0 = props.lens.x;
+    const x10 = props.lens.x1;
+    const x20 = props.lens.x2;
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (cx0 + d.x < maxLightX.value + props.lens.d / 2) {
-            items.value[props.idx].x = maxLightX.value + props.lens.d / 2
-        } else if (sensor.value.x < cx0 + d.x) {
-            items.value[props.idx].x = sensor.value.x
-        } else {
-            items.value[props.idx].x = cx0 + d.x
-        }
+        items.value[props.idx].x1 = x10 + d.x
+        items.value[props.idx].x2 = x20 + d.x
+        // if (x10 + d.x < maxLightX.value + props.lens.d / 2) {
+        //     items.value[props.idx].x = maxLightX.value + props.lens.d / 2
+        // } else if (sensor.value.x < cx0 + d.x) {
+        //     items.value[props.idx].x = sensor.value.x
+        // }
     })
 }
 
-const lensSizeChangeStartHandler = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    const m0 = getPositionOnSvg(e);
-    const r0 = props.lens.r;
-    setMoveHandler((e_: any) => {
-        const d = getPositionDiffOnSvgApp(e_, m0)
-        if (r0 - d.y < 0.1) {
-            items.value[props.idx].r = 0.1
-        } else if (r0 - d.y > rMax.value) {
-            items.value[props.idx].r = rMax.value
-        } else {
-            items.value[props.idx].r = r0 - d.y
-        }
-    })
-}
-const focalPointMoveStartHandler = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    const m0 = getPositionOnSvg(e);
-    const f0 = props.lens.f;
-    setMoveHandler((e_: any) => {
-        const d = getPositionDiffOnSvgApp(e_, m0)
-        if (f0 - d.x < props.lens.d / 2) {
-            items.value[props.idx].f = props.lens.d / 2
-        } else {
-            items.value[props.idx].f = f0 - d.x
-        }
-    })
-}
+// const lensSizeChangeStartHandler = (e: any) => {
+//     preventDefaultAndStopPropagation(e)
+//     const m0 = getPositionOnSvg(e);
+//     const r0 = props.lens.r;
+//     setMoveHandler((e_: any) => {
+//         const d = getPositionDiffOnSvgApp(e_, m0)
+//         if (r0 - d.y < 0.1) {
+//             items.value[props.idx].r = 0.1
+//         } else if (r0 - d.y > rMax.value) {
+//             items.value[props.idx].r = rMax.value
+//         } else {
+//             items.value[props.idx].r = r0 - d.y
+//         }
+//     })
+// }
+// const focalPointMoveStartHandler = (e: any) => {
+//     preventDefaultAndStopPropagation(e)
+//     const m0 = getPositionOnSvg(e);
+//     const f0 = props.lens.f;
+//     setMoveHandler((e_: any) => {
+//         const d = getPositionDiffOnSvgApp(e_, m0)
+//         if (f0 - d.x < props.lens.d / 2) {
+//             items.value[props.idx].f = props.lens.d / 2
+//         } else {
+//             items.value[props.idx].f = f0 - d.x
+//         }
+//     })
+// }
 
 const apertureSizeChangeStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
@@ -74,31 +88,34 @@ const apertureSizeChangeStartHandler = (e: any) => {
 
 const fNumber = computed(() => {
     if (options.value.aperture) {
-        return props.lens.f / (2 * props.lens.r * props.lens.aperture)
+        return f.value / (2 * props.lens.r * props.lens.aperture)
     } else {
-        return props.lens.f / (2 * props.lens.r)
+        return f.value / (2 * props.lens.r)
     }
 })
 
-const rMax = computed(() => {
-    const d = props.lens.d
-    return Math.sqrt(R.value * R.value - (R.value - d / 2) * (R.value - d / 2))
-})
+// const rMax = computed(() => {
+//     const d = props.lens.d
+//     return Math.sqrt(R.value * R.value - (R.value - d / 2) * (R.value - d / 2))
+// })
 
 const r = computed(() => {
-    return Math.min(rMax.value, props.lens.r)
+    // return Math.min(rMax.value, props.lens.r)
+    return props.lens.r
 })
 
 const leftX = computed(() => {
-    const x = props.lens.x
-    const d = props.lens.d
-    return x - d / 2 + (R.value - Math.sqrt(R.value * R.value - r.value * r.value))
+    const x = props.lens.x1
+    const R1 = Math.abs(props.lens.R1)
+    const d = R1 - Math.sqrt(R1 * R1 - r.value * r.value)
+    return x + d
 })
 
 const rightX = computed(() => {
-    const x = props.lens.x
-    const d = props.lens.d
-    return x + d / 2 - (R.value - Math.sqrt(R.value * R.value - r.value * r.value))
+    const x = props.lens.x2
+    const R2 = Math.abs(props.lens.R2)
+    const d = R2 - Math.sqrt(R2 * R2 - r.value * r.value)
+    return x - d
 })
 
 </script>
@@ -107,20 +124,20 @@ const rightX = computed(() => {
     <g>
         <!-- Curvature circle -->
         <g v-if="options.lens && options.curvature">
-            <circle :cx="lens.x + lens.d / 2 - R" :cy="0" :r="R" class="dotted"></circle>
-            <circle :cx="lens.x - lens.d / 2 + R" :cy="0" :r="R" class="dotted"></circle>
+            <circle :cx="lens.x1 + lens.R1" :cy="0" :r="Math.abs(lens.R1)" class="dotted"></circle>
+            <circle :cx="lens.x2 + lens.R2" :cy="0" :r="Math.abs(lens.R2)" class="dotted"></circle>
             <!-- center point -->
-            <circle :cx="lens.x + lens.d / 2 - R" cy="0" :r="rUI / 2" class="white"></circle>
-            <circle :cx="lens.x - lens.d / 2 + R" cy="0" :r="rUI / 2" class="white"></circle>
+            <circle :cx="lens.x1 + lens.R1" cy="0" :r="rUI / 2" class="white"></circle>
+            <circle :cx="lens.x2 + lens.R2" cy="0" :r="rUI / 2" class="white"></circle>
         </g>
 
         <!-- Hyperfocal point -->
         <g
             v-if="options.lens && options.sensor && options.circleOfConfusion && options.angleOfView && options.depthOfField && options.hyperfocalPoint">
-            <circle :cx="lens.x - lens.f - lens.f * lens.f / (sensor.circleOfConfusion * fNumber)" cy="0"
-                :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-            <circle :cx="lens.x - lens.f - lens.f * lens.f / (sensor.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2"
-                class="white"></circle>
+            <circle :cx="xm - f - f * f / (sensor.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2 * 1.2"
+                :fill="style.lineBgColor"></circle>
+            <circle :cx="xm - f - f * f / (sensor.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2" class="white">
+            </circle>
         </g>
 
         <!-- Lens -->
@@ -128,9 +145,9 @@ const rightX = computed(() => {
             <!-- Background -->
             <g class="hover-child-bg fill-none">
                 <!-- left -->
-                <path :d="`M ${leftX} ${-r} A ${R} ${R} 0 0 0 ${leftX} ${r}`" />
+                <path :d="`M ${leftX} ${-r} A ${Math.abs(lens.R1)} ${Math.abs(lens.R1)} 0 0 0 ${leftX} ${r}`" />
                 <!-- right -->
-                <path :d="`M ${rightX} ${-r} A ${R} ${R} 0 0 1 ${rightX} ${r}`" />
+                <path :d="`M ${rightX} ${-r} A ${Math.abs(lens.R2)} ${Math.abs(lens.R2)} 0 0 1 ${rightX} ${r}`" />
                 <!-- Top -->
                 <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
                 <!-- Bottom -->
@@ -139,56 +156,56 @@ const rightX = computed(() => {
             <!-- Foreground -->
             <g class="hover-child fill-none">
                 <!-- left -->
-                <path :d="`M ${leftX} ${-r} A ${R} ${R} 0 0 0 ${leftX} ${r}`" />
+                <path :d="`M ${leftX} ${-r} A ${Math.abs(lens.R1)} ${Math.abs(lens.R1)} 0 0 0 ${leftX} ${r}`" />
                 <!-- right -->
-                <path :d="`M ${rightX} ${-r} A ${R} ${R} 0 0 1 ${rightX} ${r}`" />
+                <path :d="`M ${rightX} ${-r} A ${Math.abs(lens.R2)} ${Math.abs(lens.R2)} 0 0 1 ${rightX} ${r}`" />
                 <!-- Top -->
                 <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
                 <!-- Bottom -->
                 <line :x1="leftX" :y1="r" :x2="rightX" :y2="r"></line>
             </g>
             <!-- dummy for ui -->
-            <rect class='ui-transparent' :x="lens.x - lens.d / 2" :y="-r" :width="lens.d" :height="2 * r"
+            <rect class='ui-transparent' :x="lens.x1" :y="-r" :width="lens.x2 - lens.x1" :height="2 * r"
                 @mousedown="moveStartHandler" />
         </g>
         <!-- Focal points -->
         <g v-if="options.lensFocalPoints">
             <!-- left hand -->
             <g>
-                <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-                <circle :cx="lens.x - lens.f" cy="0" :r="rUI / 2" class="white"></circle>
+                <circle :cx="xm - f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
+                <circle :cx="xm - f" cy="0" :r="rUI / 2" class="white"></circle>
                 <!-- UI -->
-                <circle :cx="lens.x - lens.f" cy="0" :r="rUI" @mousedown="focalPointMoveStartHandler" class="ui-hidden">
-                </circle>
+                <!-- <circle :cx="xm - f" cy="0" :r="rUI" @mousedown="focalPointMoveStartHandler" class="ui-hidden">
+                </circle> -->
             </g>
             <!-- right hand -->
-            <circle :cx="lens.x + lens.f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-            <circle :cx="lens.x + lens.f" cy="0" :r="rUI / 2" class="white"></circle>
+            <circle :cx="xm + f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
+            <circle :cx="xm + f" cy="0" :r="rUI / 2" class="white"></circle>
 
             <!-- Double focal points -->
             <g v-if="options.lensDoubleFocalPoints">
-                <circle :cx="lens.x - 2 * lens.f" cy="0" :r="rUI / 2" class="white"></circle>
-                <circle :cx="lens.x + 2 * lens.f" cy="0" :r="rUI / 2" class="white"></circle>
+                <circle :cx="xm - 2 * f" cy="0" :r="rUI / 2" class="white"></circle>
+                <circle :cx="xm + 2 * f" cy="0" :r="rUI / 2" class="white"></circle>
             </g>
         </g>
         <!-- Lens size change UI-->
-        <circle :cx="lens.x" :cy="-r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler"> </circle>
+        <!-- <circle :cx="lens.x" :cy="-r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler"> </circle> -->
 
         <!-- Aperture -->
         <g v-if="options.aperture">
             <!-- Lines -->
             <!-- Background -->
             <g class="hover-sibling-bg no-pointer-events">
-                <line :x1="lens.x" :y1="-r" :x2="lens.x" :y2="-r * lens.aperture"></line>
-                <line :x1="lens.x" :y1="r" :x2="lens.x" :y2="r * lens.aperture"></line>
+                <line :x1="xm" :y1="-r" :x2="xm" :y2="-r * lens.aperture"></line>
+                <line :x1="xm" :y1="r" :x2="xm" :y2="r * lens.aperture"></line>
             </g>
             <!-- Foreground -->
             <g class="hover-sibling no-pointer-events">
-                <line :x1="lens.x" :y1="-r" :x2="lens.x" :y2="-r * lens.aperture"></line>
-                <line :x1="lens.x" :y1="r" :x2="lens.x" :y2="r * lens.aperture"></line>
+                <line :x1="xm" :y1="-r" :x2="xm" :y2="-r * lens.aperture"></line>
+                <line :x1="xm" :y1="r" :x2="xm" :y2="r * lens.aperture"></line>
             </g>
             <!-- UI -->
-            <circle :cx="lens.x" :cy="r * lens.aperture" :r="rUI" @mousedown="apertureSizeChangeStartHandler"
+            <circle :cx="xm" :cy="r * lens.aperture" :r="rUI" @mousedown="apertureSizeChangeStartHandler"
                 class="hover-sibling-master ui-hidden"></circle>
         </g>
     </g>
diff --git a/src/globals.ts b/src/globals.ts
index ff632f8..2605332 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -1,6 +1,6 @@
 import { ref, computed } from "vue"
-import { Vec, vec, calcLensR } from "./math"
-import { Light } from "./type"
+import { Vec, vec } from "./math"
+import { type Lens, Light } from "./type"
 
 //================================
 // States
@@ -41,10 +41,10 @@ export const lights = ref(lights0())
 // Items
 //--------------------------------
 
-export const items0 = () => {
+export const items0 = (): Lens[] => {
     return [
-        { x: -50, r: 10, f: 50, n: 1.5, d: 5, aperture: 1 },
-        { x: 0, r: 10, f: 50, n: 1.5, d: 5, aperture: 1 },
+        { x1: 0, x2: 6, R1: 25, R2: -50, r: 10, n: 1.5, aperture: 1 },
+        { x1: -106, x2: -100, R1: 50, R2: -25, r: 10, n: 1.5, aperture: 1 },
     ]
 }
 export const items = ref(items0())
@@ -207,7 +207,8 @@ export const infR = computed(() => {
 export const minLensX = computed(() => {
     let minX = infR.value
     for (const lens of items.value) {
-        minX = Math.min(minX, lens.x - lens.d / 2)
+        const left = Math.min(lens.x1, lens.x1)
+        minX = Math.min(minX, left)
     }
     return minX
 })
@@ -215,7 +216,7 @@ export const minLensX = computed(() => {
 export const maxLensX = computed(() => {
     let maxX = -infR.value
     for (const lens of items.value) {
-        maxX = Math.min(maxX, lens.x)
+        maxX = Math.min(maxX, lens.x2)
     }
     return maxX
 })
diff --git a/src/math.ts b/src/math.ts
index e8df8ca..d7073e0 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -217,9 +217,11 @@ export const fGaussian = (f: number, px: number, py: number) => {
     return vec(qx, qy)
 }
 
-export const calcLensR = (f: number, n: number, d: number) => {
-    const a = n
-    const b = -2 * f * n * (n - 1)
-    const c = d * f * (n - 1) * (n - 1)
-    return (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a)
-}
\ No newline at end of file
+export const calcLensF = (lens: any) => {
+    const d = lens.x2 - lens.x1
+    const R1 = lens.R1
+    const R2 = lens.R2
+    const n = lens.n
+    const inv = (n - 1) * (1 / R1 - 1 / R2) + (d / n) * ((n - 1) * (n - 1) / (R1 * R2))
+    return 1 / inv
+}
diff --git a/src/type.ts b/src/type.ts
index c130759..93c2a46 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -1,4 +1,15 @@
+// TODO: "Light" -> "LightType"
 export enum Light {
     Point,
     Parallel
+}
+
+export type Lens = {
+    x1: number,
+    x2: number,
+    R1: number,
+    R2: number,
+    r: number,
+    n: number,
+    aperture: number,
 }
\ No newline at end of file

From c2fa614b89a0f470842319a4404b848974e5ddea Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 17:35:24 +0900
Subject: [PATCH 09/53] Lens move

---
 src/SVG/Lens.vue | 78 +++++++++++++++++++++++++++---------------------
 1 file changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 454c6da..e633f67 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -23,15 +23,57 @@ const xm = computed(() => {
     return (props.lens.x1 + props.lens.x2) / 2
 })
 
+const fNumber = computed(() => {
+    if (options.value.aperture) {
+        return f.value / (2 * props.lens.r * props.lens.aperture)
+    } else {
+        return f.value / (2 * props.lens.r)
+    }
+})
+
+// const rMax = computed(() => {
+//     const d = props.lens.d
+//     return Math.sqrt(R.value * R.value - (R.value - d / 2) * (R.value - d / 2))
+// })
+
+const r = computed(() => {
+    // return Math.min(rMax.value, props.lens.r)
+    return props.lens.r
+})
+
+const leftX = computed(() => {
+    const x = props.lens.x1
+    const R1 = Math.abs(props.lens.R1)
+    const d = R1 - Math.sqrt(R1 * R1 - r.value * r.value)
+    return x + d
+})
+
+const rightX = computed(() => {
+    const x = props.lens.x2
+    const R2 = Math.abs(props.lens.R2)
+    const d = R2 - Math.sqrt(R2 * R2 - r.value * r.value)
+    return x - d
+})
+
 const moveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
     const x10 = props.lens.x1;
     const x20 = props.lens.x2;
+    const leftX0 = leftX.value
+    const rightX0 = rightX.value
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        items.value[props.idx].x1 = x10 + d.x
-        items.value[props.idx].x2 = x20 + d.x
+        if (x10 + d.x < maxLightX.value) {
+            items.value[props.idx].x1 = maxLightX.value
+            items.value[props.idx].x2 = maxLightX.value + (x20 - x10)
+        } else if (x20 + d.x > sensor.value.x) {
+            items.value[props.idx].x1 = sensor.value.x - (x20 - x10)
+            items.value[props.idx].x2 = sensor.value.x
+        } else {
+            items.value[props.idx].x1 = x10 + d.x
+            items.value[props.idx].x2 = x20 + d.x
+        }
         // if (x10 + d.x < maxLightX.value + props.lens.d / 2) {
         //     items.value[props.idx].x = maxLightX.value + props.lens.d / 2
         // } else if (sensor.value.x < cx0 + d.x) {
@@ -86,38 +128,6 @@ const apertureSizeChangeStartHandler = (e: any) => {
     })
 }
 
-const fNumber = computed(() => {
-    if (options.value.aperture) {
-        return f.value / (2 * props.lens.r * props.lens.aperture)
-    } else {
-        return f.value / (2 * props.lens.r)
-    }
-})
-
-// const rMax = computed(() => {
-//     const d = props.lens.d
-//     return Math.sqrt(R.value * R.value - (R.value - d / 2) * (R.value - d / 2))
-// })
-
-const r = computed(() => {
-    // return Math.min(rMax.value, props.lens.r)
-    return props.lens.r
-})
-
-const leftX = computed(() => {
-    const x = props.lens.x1
-    const R1 = Math.abs(props.lens.R1)
-    const d = R1 - Math.sqrt(R1 * R1 - r.value * r.value)
-    return x + d
-})
-
-const rightX = computed(() => {
-    const x = props.lens.x2
-    const R2 = Math.abs(props.lens.R2)
-    const d = R2 - Math.sqrt(R2 * R2 - r.value * r.value)
-    return x - d
-})
-
 </script>
 
 <template>

From dc3b5fce80054039f28d9adfc226702b4d0b0161 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 19:06:24 +0900
Subject: [PATCH 10/53] Lens resize

---
 src/SVG/Lens.vue | 59 +++++++++++++++++++++++++-----------------------
 src/math.ts      | 38 +++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 28 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index e633f67..8e7cac7 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { items, sensor, options, style, rUI, maxLightX } from '../globals'
-import { calcLensF } from '../math'
+import { vec, calcLensF, intersectCC, intersectionCC } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import type { Lens } from '../type'
 
@@ -31,14 +31,21 @@ const fNumber = computed(() => {
     }
 })
 
-// const rMax = computed(() => {
-//     const d = props.lens.d
-//     return Math.sqrt(R.value * R.value - (R.value - d / 2) * (R.value - d / 2))
-// })
+const rMax = computed(() => {
+    const R1 = props.lens.R1
+    const R2 = props.lens.R2
+    const c1 = vec(props.lens.x1 + R1, 0)
+    const c2 = vec(props.lens.x2 + R2, 0)
+    if (intersectCC(c1, Math.abs(R1), c2, Math.abs(R2))) {
+        const [p1, p2] = intersectionCC(c1, Math.abs(R1), c2, Math.abs(R2))
+        return Math.abs(p1.y)
+    } else {
+        return Math.min(Math.abs(R1), Math.abs(R2))
+    }
+})
 
 const r = computed(() => {
-    // return Math.min(rMax.value, props.lens.r)
-    return props.lens.r
+    return Math.min(rMax.value, props.lens.r)
 })
 
 const leftX = computed(() => {
@@ -74,29 +81,24 @@ const moveStartHandler = (e: any) => {
             items.value[props.idx].x1 = x10 + d.x
             items.value[props.idx].x2 = x20 + d.x
         }
-        // if (x10 + d.x < maxLightX.value + props.lens.d / 2) {
-        //     items.value[props.idx].x = maxLightX.value + props.lens.d / 2
-        // } else if (sensor.value.x < cx0 + d.x) {
-        //     items.value[props.idx].x = sensor.value.x
-        // }
     })
 }
 
-// const lensSizeChangeStartHandler = (e: any) => {
-//     preventDefaultAndStopPropagation(e)
-//     const m0 = getPositionOnSvg(e);
-//     const r0 = props.lens.r;
-//     setMoveHandler((e_: any) => {
-//         const d = getPositionDiffOnSvgApp(e_, m0)
-//         if (r0 - d.y < 0.1) {
-//             items.value[props.idx].r = 0.1
-//         } else if (r0 - d.y > rMax.value) {
-//             items.value[props.idx].r = rMax.value
-//         } else {
-//             items.value[props.idx].r = r0 - d.y
-//         }
-//     })
-// }
+const lensSizeChangeStartHandler = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m0 = getPositionOnSvg(e);
+    const r0 = props.lens.r;
+    setMoveHandler((e_: any) => {
+        const d = getPositionDiffOnSvgApp(e_, m0)
+        if (r0 - d.y < 0.1) {
+            items.value[props.idx].r = 0.1
+        } else if (r0 - d.y > rMax.value) {
+            items.value[props.idx].r = rMax.value
+        } else {
+            items.value[props.idx].r = r0 - d.y
+        }
+    })
+}
 // const focalPointMoveStartHandler = (e: any) => {
 //     preventDefaultAndStopPropagation(e)
 //     const m0 = getPositionOnSvg(e);
@@ -199,7 +201,8 @@ const apertureSizeChangeStartHandler = (e: any) => {
             </g>
         </g>
         <!-- Lens size change UI-->
-        <!-- <circle :cx="lens.x" :cy="-r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler"> </circle> -->
+        <circle :cx="(leftX + rightX) / 2" :cy="-r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler">
+        </circle>
 
         <!-- Aperture -->
         <g v-if="options.aperture">
diff --git a/src/math.ts b/src/math.ts
index d7073e0..e942835 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -180,6 +180,44 @@ export const intersectionSS = (a1: Vec, a2: Vec, b1: Vec, b2: Vec) => {
     }
 }
 
+export const intersectCC = (c1: Vec, r1: number, c2: Vec, r2: number) => {
+    // Swap
+    if (r1 < r2) {
+        const cTmp = c1.copy()
+        c1 = c2
+        c2 = cTmp
+        const rTmp = r1
+        r1 = r2
+        r2 = rTmp
+    }
+    const dc = c2.sub(c1).length();
+    // Separated
+    if (dc > r1 +r2) {
+        return false
+    }
+    // Connotation
+    if (dc + r2 < r1) {
+        return false
+    }
+    return true
+}
+
+export const intersectionCC = (c1: Vec, r1: number, c2: Vec, r2: number) => {
+    // Swap
+    if (r1 < r2) {
+        const cTmp = c1.copy()
+        c1 = c2
+        c2 = cTmp
+        const rTmp = r1
+        r1 = r2
+        r2 = rTmp
+    }
+    const d = c2.sub(c1).length()
+    const n = c2.sub(c1).normalize()
+    const theta = Math.acos((d * d + r1 * r1 - r2 * r2) / (2.0 * d * r1));
+    return [c1.add(n.rotate(theta).mul(r1)), c1.add(n.rotate(-theta).mul(r1))]
+}
+
 //================================
 // Support functions
 //================================

From 2a007dcdbaa2a4e5db62a2b52e785bdc24594a05 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 19:49:54 +0900
Subject: [PATCH 11/53] Lens thickness change

---
 src/SVG/Lens.vue | 58 +++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 53 insertions(+), 5 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 8e7cac7..dc0d1a1 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -38,6 +38,8 @@ const rMax = computed(() => {
     const c2 = vec(props.lens.x2 + R2, 0)
     if (intersectCC(c1, Math.abs(R1), c2, Math.abs(R2))) {
         const [p1, p2] = intersectionCC(c1, Math.abs(R1), c2, Math.abs(R2))
+        // TODO:
+        // const minR = Math.min(Math.abs(R1), Math.abs(R2))
         return Math.abs(p1.y)
     } else {
         return Math.min(Math.abs(R1), Math.abs(R2))
@@ -67,8 +69,8 @@ const moveStartHandler = (e: any) => {
     const m0 = getPositionOnSvg(e);
     const x10 = props.lens.x1;
     const x20 = props.lens.x2;
-    const leftX0 = leftX.value
-    const rightX0 = rightX.value
+    // const leftX0 = leftX.value
+    // const rightX0 = rightX.value
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         if (x10 + d.x < maxLightX.value) {
@@ -84,6 +86,41 @@ const moveStartHandler = (e: any) => {
     })
 }
 
+const x1MoveStartHandler = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m0 = getPositionOnSvg(e);
+    const x10 = props.lens.x1;
+    const leftX0 = leftX.value
+    setMoveHandler((e_: any) => {
+        const d = getPositionDiffOnSvgApp(e_, m0)
+        if (x10 + d.x < maxLightX.value) {
+            items.value[props.idx].x1 = maxLightX.value
+        }else if(leftX0 + d.x > rightX.value) {
+            items.value[props.idx].x1 = rightX.value - (leftX0 - x10)
+        } else {
+            items.value[props.idx].x1 = x10 + d.x
+        }
+    })
+}
+
+const x2MoveStartHandler = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m0 = getPositionOnSvg(e);
+    const x20 = props.lens.x2
+    // const leftX0 = leftX.value
+    const rightX0 = rightX.value
+    setMoveHandler((e_: any) => {
+        const d = getPositionDiffOnSvgApp(e_, m0)
+        if (rightX0 + d.x < leftX.value) {
+            items.value[props.idx].x2 = leftX.value + (x20 - rightX0)
+        }else if(x20 + d.x > sensor.value.x) {
+            items.value[props.idx].x2 = sensor.value.x
+        } else {
+            items.value[props.idx].x2 = x20 + d.x
+        }
+    })
+}
+
 const lensSizeChangeStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
@@ -154,6 +191,9 @@ const apertureSizeChangeStartHandler = (e: any) => {
 
         <!-- Lens -->
         <g class="hover-parent">
+            <!-- dummy for ui -->
+            <rect class='ui-transparent' :x="lens.x1" :y="-r" :width="lens.x2 - lens.x1" :height="2 * r"
+                @mousedown="moveStartHandler" />
             <!-- Background -->
             <g class="hover-child-bg fill-none">
                 <!-- left -->
@@ -176,10 +216,18 @@ const apertureSizeChangeStartHandler = (e: any) => {
                 <!-- Bottom -->
                 <line :x1="leftX" :y1="r" :x2="rightX" :y2="r"></line>
             </g>
-            <!-- dummy for ui -->
-            <rect class='ui-transparent' :x="lens.x1" :y="-r" :width="lens.x2 - lens.x1" :height="2 * r"
-                @mousedown="moveStartHandler" />
         </g>
+
+        <!-- Thickness change UI -->
+        <g class="fill-none" pointer-events="stroke">
+            <!-- left -->
+            <path :d="`M ${leftX} ${-r} A ${Math.abs(lens.R1)} ${Math.abs(lens.R1)} 0 0 0 ${leftX} ${r}`"
+                class="ui-hidden" @mousedown="x1MoveStartHandler" />
+            <!-- right -->
+            <path :d="`M ${rightX} ${-r} A ${Math.abs(lens.R2)} ${Math.abs(lens.R2)} 0 0 1 ${rightX} ${r}`"
+                class="ui-hidden" @mousedown="x2MoveStartHandler" />
+        </g>
+
         <!-- Focal points -->
         <g v-if="options.lensFocalPoints">
             <!-- left hand -->

From 92557c45ef07732bf3d19c5ec9674e1abdf30165 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 20:02:17 +0900
Subject: [PATCH 12/53] Fix lens size change

---
 src/Canvas.vue   | 15 ++++++++-------
 src/SVG/Lens.vue | 28 +++++++---------------------
 src/math.ts      | 17 +++++++++++++++++
 3 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index d1eb9f7..f074f7d 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -2,7 +2,7 @@
 import { watch, onMounted, ref } from 'vue'
 
 import { state, lights, items, sensor, sensorData, apple, options, style, infR } from './globals'
-import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS } from './math'
+import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS, calcRMax } from './math'
 
 import { Light } from './type'
 
@@ -36,6 +36,7 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     const s0 = s.copy()
     const xm = (lens.x1 + lens.x2) / 2
     const f = calcLensF(lens)
+    const r = Math.min(calcRMax(lens), lens.r)
     let innerLens = false
 
     // Find image position of the light source
@@ -49,7 +50,7 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
       // Center of lens curvature circle
       const c = vec(lens.x1 + lens.R1, 0)
 
-      const p = getIntersectionLens(s, v, c, lens.r, Math.abs(lens.R1), true)
+      const p = getIntersectionLens(s, v, c, r, Math.abs(lens.R1), true)
       if (p) {
         v = p.sub(s)
         s = drawSegment(s, v, v.length())
@@ -68,10 +69,10 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     // Collision to aperture
     //--------------------------------
     if (options.value.aperture) {
-      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(xm, -lens.r), vec(xm, lens.r))
+      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(xm, -r), vec(xm, r))
       if (p) {
-        const upperHit = p.y > lens.aperture * lens.r
-        const lowerHit = p.y < -lens.aperture * lens.r
+        const upperHit = p.y > lens.aperture * r
+        const lowerHit = p.y < -lens.aperture * r
         if (lowerHit || upperHit) {
           v = p.sub(s)
           drawSegment(s, v, v.length())
@@ -87,7 +88,7 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
       // Center of lens curvature circle
       const c = vec(lens.x2 + lens.R2, 0)
 
-      const p = getIntersectionLens(s, v, c, lens.r, Math.abs(lens.R2), false)
+      const p = getIntersectionLens(s, v, c, r, Math.abs(lens.R2), false)
       if (p) {
         v = p.sub(s)
         const nextS = drawSegment(s, v, v.length())
@@ -105,7 +106,7 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     // Collision to ideal lens
     //--------------------------------
     if (options.value.lensIdeal && options.value.lens) {
-      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(xm, -lens.r), vec(xm, lens.r))
+      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(xm, -r), vec(xm, r))
       if (p) {
         v = p.sub(s)
         s = drawSegment(s, v, v.length())
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index dc0d1a1..9f8fc78 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { items, sensor, options, style, rUI, maxLightX } from '../globals'
-import { vec, calcLensF, intersectCC, intersectionCC } from '../math'
+import { calcLensF, calcRMax } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import type { Lens } from '../type'
 
@@ -32,18 +32,7 @@ const fNumber = computed(() => {
 })
 
 const rMax = computed(() => {
-    const R1 = props.lens.R1
-    const R2 = props.lens.R2
-    const c1 = vec(props.lens.x1 + R1, 0)
-    const c2 = vec(props.lens.x2 + R2, 0)
-    if (intersectCC(c1, Math.abs(R1), c2, Math.abs(R2))) {
-        const [p1, p2] = intersectionCC(c1, Math.abs(R1), c2, Math.abs(R2))
-        // TODO:
-        // const minR = Math.min(Math.abs(R1), Math.abs(R2))
-        return Math.abs(p1.y)
-    } else {
-        return Math.min(Math.abs(R1), Math.abs(R2))
-    }
+    return calcRMax(props.lens)
 })
 
 const r = computed(() => {
@@ -90,13 +79,12 @@ const x1MoveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
     const x10 = props.lens.x1;
-    const leftX0 = leftX.value
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         if (x10 + d.x < maxLightX.value) {
             items.value[props.idx].x1 = maxLightX.value
-        }else if(leftX0 + d.x > rightX.value) {
-            items.value[props.idx].x1 = rightX.value - (leftX0 - x10)
+        } else if (x10 + d.x > props.lens.x2) {
+            items.value[props.idx].x1 = props.lens.x2
         } else {
             items.value[props.idx].x1 = x10 + d.x
         }
@@ -107,13 +95,11 @@ const x2MoveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
     const x20 = props.lens.x2
-    // const leftX0 = leftX.value
-    const rightX0 = rightX.value
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (rightX0 + d.x < leftX.value) {
-            items.value[props.idx].x2 = leftX.value + (x20 - rightX0)
-        }else if(x20 + d.x > sensor.value.x) {
+        if (x20 + d.x < props.lens.x1) {
+            items.value[props.idx].x2 = props.lens.x1
+        } else if (x20 + d.x > sensor.value.x) {
             items.value[props.idx].x2 = sensor.value.x
         } else {
             items.value[props.idx].x2 = x20 + d.x
diff --git a/src/math.ts b/src/math.ts
index e942835..a752c21 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -263,3 +263,20 @@ export const calcLensF = (lens: any) => {
     const inv = (n - 1) * (1 / R1 - 1 / R2) + (d / n) * ((n - 1) * (n - 1) / (R1 * R2))
     return 1 / inv
 }
+
+export const calcRMax = (lens: any) => {
+    const R1 = lens.R1
+    const R2 = lens.R2
+    const c1 = vec(lens.x1 + R1, 0)
+    const c2 = vec(lens.x2 + R2, 0)
+    if (intersectCC(c1, Math.abs(R1), c2, Math.abs(R2))) {
+        const [p1, p2] = intersectionCC(c1, Math.abs(R1), c2, Math.abs(R2))
+        // TODO:
+        // const minR = Math.min(Math.abs(R1), Math.abs(R2))
+        // items.value[props.idx].r = Math.abs(p1.y) // DANGER!!
+        return Math.abs(p1.y)
+    } else {
+        // items.value[props.idx].r = Math.min(Math.abs(R1), Math.abs(R2)) // DANGER!!
+        return Math.min(Math.abs(R1), Math.abs(R2))
+    }
+}
\ No newline at end of file

From 660c7379c3e18fdf5663eb97d088d5d68f110d09 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Sun, 23 Jun 2024 23:59:19 +0900
Subject: [PATCH 13/53] Concave lens

---
 src/Canvas.vue   | 25 ++++++++++----
 src/SVG/Lens.vue | 89 ++++++++++++++++++++++++++++++++++++++----------
 src/globals.ts   | 10 +++---
 src/math.ts      | 40 ++++++++++++----------
 4 files changed, 116 insertions(+), 48 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index f074f7d..a69c61c 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -50,16 +50,20 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
       // Center of lens curvature circle
       const c = vec(lens.x1 + lens.R1, 0)
 
-      const p = getIntersectionLens(s, v, c, r, Math.abs(lens.R1), true)
+      const p = getIntersectionLens(s, v, c, r, lens.R1)
       if (p) {
         v = p.sub(s)
         s = drawSegment(s, v, v.length())
 
         // Refraction (inner lens rays)
-        const phi1 = crossAngle(Vec.sub(p, c), Vec.sub(s0, p));
+        const phi1 = crossAngle(Vec.sub(p, c).mul(lens.R1 > 0 ? 1 : -1), Vec.sub(s0, p));
         const phi2 = Math.asin(Math.sin(phi1) / lens.n);
         const theta = Math.atan2(p.y - c.y, p.x - c.x) + Math.PI + phi2;
-        v = vecRad(theta)
+        if (lens.R1 > 0) {
+          v = vecRad(theta)
+        } else {
+          v = vecRad(theta + Math.PI)
+        }
 
         innerLens = true
       }
@@ -88,16 +92,20 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
       // Center of lens curvature circle
       const c = vec(lens.x2 + lens.R2, 0)
 
-      const p = getIntersectionLens(s, v, c, r, Math.abs(lens.R2), false)
+      const p = getIntersectionLens(s, v, c, r, lens.R2)
       if (p) {
         v = p.sub(s)
         const nextS = drawSegment(s, v, v.length())
 
         // Refraction (inner lens rays)
-        const phi1 = crossAngle(Vec.sub(p, c), Vec.sub(p, s));
+        const phi1 = crossAngle(Vec.sub(p, c).mul(lens.R2 < 0 ? 1 : -1), Vec.sub(p, s));
         const phi2 = Math.asin(Math.sin(phi1) * lens.n);
         const theta = Math.atan2(p.y - c.y, p.x - c.x) + phi2;
-        v = vecRad(theta)
+        if (lens.R2 > 0) {
+          v = vecRad(theta + Math.PI)
+        } else {
+          v = vecRad(theta)
+        }
         s = nextS
       }
     }
@@ -116,8 +124,11 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
         if (image.x === Infinity) {
           theta = Math.atan2(-s0.y, -(s0.x - xm));
         }
+        if (f < 0) {
+          theta += Math.PI
+        }
         if (xm - f < s0.x) {
-          theta += Math.PI;
+          theta += Math.PI
         }
         v = vecRad(theta)
       }
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 9f8fc78..92e1a79 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -15,10 +15,6 @@ const f = computed(() => {
     return calcLensF(props.lens)
 })
 
-const d = computed(() => {
-    return props.lens.x2 - props.lens.x1
-})
-
 const xm = computed(() => {
     return (props.lens.x1 + props.lens.x2) / 2
 })
@@ -41,16 +37,36 @@ const r = computed(() => {
 
 const leftX = computed(() => {
     const x = props.lens.x1
-    const R1 = Math.abs(props.lens.R1)
-    const d = R1 - Math.sqrt(R1 * R1 - r.value * r.value)
-    return x + d
+    const R1 = props.lens.R1
+    const d = Math.abs(R1) - Math.sqrt(R1 * R1 - r.value * r.value)
+    if (R1 > 0) {
+        return x + d
+    } else {
+        return x - d
+    }
 })
 
 const rightX = computed(() => {
     const x = props.lens.x2
-    const R2 = Math.abs(props.lens.R2)
-    const d = R2 - Math.sqrt(R2 * R2 - r.value * r.value)
-    return x - d
+    const R2 = props.lens.R2
+    const d = Math.abs(R2) - Math.sqrt(R2 * R2 - r.value * r.value)
+    if (R2 > 0) {
+        return x + d
+    } else {
+        return x - d
+    }
+})
+
+const path1 = computed(() => {
+    const absR1 = Math.abs(props.lens.R1)
+    const sweep = props.lens.R1 > 0 ? 0 : 1
+    return `M ${leftX.value} ${-r.value} A ${absR1} ${absR1} 0 0 ${sweep} ${leftX.value} ${r.value}`
+})
+
+const path2 = computed(() => {
+    const absR2 = Math.abs(props.lens.R2)
+    const sweep = props.lens.R2 > 0 ? 0 : 1
+    return `M ${rightX.value} ${-r.value} A ${absR2} ${absR2} 0 0 ${sweep} ${rightX.value} ${r.value}`
 })
 
 const moveStartHandler = (e: any) => {
@@ -107,6 +123,40 @@ const x2MoveStartHandler = (e: any) => {
     })
 }
 
+const r1MoveStartHandler = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m0 = getPositionOnSvg(e);
+    const r0 = r.value
+    const x10 = props.lens.x1
+    const leftX0 = leftX.value
+    setMoveHandler((e_: any) => {
+        const d = getPositionDiffOnSvgApp(e_, m0)
+        if (Math.abs(leftX0 - (x10 + d.x)) <= r0) {
+            const a = x10 + d.x - leftX0
+            const R1n = (-r0 * r0 - a * a) / (2 * a)
+            items.value[props.idx].R1 = R1n
+            items.value[props.idx].x1 = x10 + d.x
+        }
+    })
+}
+
+const r2MoveStartHandler = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m0 = getPositionOnSvg(e);
+    const r0 = r.value
+    const x20 = props.lens.x2
+    const rightX0 = rightX.value
+    setMoveHandler((e_: any) => {
+        const d = getPositionDiffOnSvgApp(e_, m0)
+        if (Math.abs((x20 + d.x) - rightX0) <= r0) {
+            const a = x20 + d.x - rightX0
+            const R1n = (-r0 * r0 - a * a) / (2 * a)
+            items.value[props.idx].R2 = R1n
+            items.value[props.idx].x2 = x20 + d.x
+        }
+    })
+}
+
 const lensSizeChangeStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
@@ -183,9 +233,9 @@ const apertureSizeChangeStartHandler = (e: any) => {
             <!-- Background -->
             <g class="hover-child-bg fill-none">
                 <!-- left -->
-                <path :d="`M ${leftX} ${-r} A ${Math.abs(lens.R1)} ${Math.abs(lens.R1)} 0 0 0 ${leftX} ${r}`" />
+                <path :d="path1" />
                 <!-- right -->
-                <path :d="`M ${rightX} ${-r} A ${Math.abs(lens.R2)} ${Math.abs(lens.R2)} 0 0 1 ${rightX} ${r}`" />
+                <path :d="path2" />
                 <!-- Top -->
                 <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
                 <!-- Bottom -->
@@ -194,9 +244,9 @@ const apertureSizeChangeStartHandler = (e: any) => {
             <!-- Foreground -->
             <g class="hover-child fill-none">
                 <!-- left -->
-                <path :d="`M ${leftX} ${-r} A ${Math.abs(lens.R1)} ${Math.abs(lens.R1)} 0 0 0 ${leftX} ${r}`" />
+                <path :d="path1" />
                 <!-- right -->
-                <path :d="`M ${rightX} ${-r} A ${Math.abs(lens.R2)} ${Math.abs(lens.R2)} 0 0 1 ${rightX} ${r}`" />
+                <path :d="path2" />
                 <!-- Top -->
                 <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
                 <!-- Bottom -->
@@ -207,13 +257,15 @@ const apertureSizeChangeStartHandler = (e: any) => {
         <!-- Thickness change UI -->
         <g class="fill-none" pointer-events="stroke">
             <!-- left -->
-            <path :d="`M ${leftX} ${-r} A ${Math.abs(lens.R1)} ${Math.abs(lens.R1)} 0 0 0 ${leftX} ${r}`"
-                class="ui-hidden" @mousedown="x1MoveStartHandler" />
+            <path :d="path1" class="ui-hidden" @mousedown="x1MoveStartHandler" />
             <!-- right -->
-            <path :d="`M ${rightX} ${-r} A ${Math.abs(lens.R2)} ${Math.abs(lens.R2)} 0 0 1 ${rightX} ${r}`"
-                class="ui-hidden" @mousedown="x2MoveStartHandler" />
+            <path :d="path2" class="ui-hidden" @mousedown="x2MoveStartHandler" />
         </g>
 
+        <!-- Curvature change UI -->
+        <circle :cx="lens.x1" :cy="0" :r="rUI" class="ui-hidden" @mousedown="r1MoveStartHandler"></circle>
+        <circle :cx="lens.x2" :cy="0" :r="rUI" class="ui-hidden" @mousedown="r2MoveStartHandler"></circle>
+
         <!-- Focal points -->
         <g v-if="options.lensFocalPoints">
             <!-- left hand -->
@@ -234,6 +286,7 @@ const apertureSizeChangeStartHandler = (e: any) => {
                 <circle :cx="xm + 2 * f" cy="0" :r="rUI / 2" class="white"></circle>
             </g>
         </g>
+
         <!-- Lens size change UI-->
         <circle :cx="(leftX + rightX) / 2" :cy="-r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler">
         </circle>
diff --git a/src/globals.ts b/src/globals.ts
index 2605332..8cef7e0 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -29,10 +29,10 @@ export const lights0 = ():
         { type: Light.Parallel, s: Vec, t: Vec, color: number }
     )[] => {
     return [
-        { type: Light.Point, c: vec(-200, 20), color: 0 }, // red
+        // { type: Light.Point, c: vec(-200, 20), color: 0 }, // red
         { type: Light.Point, c: vec(-160, 0), color: 120 }, // green
-        { type: Light.Point, c: vec(-120, -20), color: 240 }, // blue
-        { type: Light.Parallel, s: vec(-180, -30), t: vec(-180, 30), color: 120 }, // green
+        // { type: Light.Point, c: vec(-120, -20), color: 240 }, // blue
+        // { type: Light.Parallel, s: vec(-180, -30), t: vec(-180, 30), color: 120 }, // green
     ]
 }
 export const lights = ref(lights0())
@@ -43,8 +43,8 @@ export const lights = ref(lights0())
 
 export const items0 = (): Lens[] => {
     return [
+        { x1: -106, x2: -100, R1: -50, R2: -25, r: 10, n: 1.5, aperture: 1 },
         { x1: 0, x2: 6, R1: 25, R2: -50, r: 10, n: 1.5, aperture: 1 },
-        { x1: -106, x2: -100, R1: 50, R2: -25, r: 10, n: 1.5, aperture: 1 },
     ]
 }
 export const items = ref(items0())
@@ -140,7 +140,7 @@ export const options0 = () => {
     return {
         advanced: false,
         lens: true,
-        lensIdeal: true,
+        lensIdeal: false,
         lensFocalPoints: false,
         lensDoubleFocalPoints: false,
         hyperfocalPoint: false,
diff --git a/src/math.ts b/src/math.ts
index a752c21..3f4dbb3 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -192,7 +192,7 @@ export const intersectCC = (c1: Vec, r1: number, c2: Vec, r2: number) => {
     }
     const dc = c2.sub(c1).length();
     // Separated
-    if (dc > r1 +r2) {
+    if (dc > r1 + r2) {
         return false
     }
     // Connotation
@@ -219,36 +219,37 @@ export const intersectionCC = (c1: Vec, r1: number, c2: Vec, r2: number) => {
 }
 
 //================================
-// Support functions
+// Lens
 //================================
 
-export const getIntersectionLens = (s: Vec, v: Vec, cl: Vec, r: number /* lens diameter */, R: number /* lens curvature radius */, select: boolean) => {
+export const getIntersectionLens = (s: Vec, v: Vec, cl: Vec, r: number /* lens diameter */, R: number /* lens curvature radius */) => {
+    const absR = Math.abs(R)
     const n = v.normalize()
-
     const a = 1;
     const b = 2 * ((s.x - cl.x) * n.x + (s.y - cl.y) * n.y);
-    const c = Math.pow(s.x - cl.x, 2) + Math.pow(s.y - cl.y, 2) - R * R;
+    const c = Math.pow(s.x - cl.x, 2) + Math.pow(s.y - cl.y, 2) - absR * absR;
     const cond = b * b - 4 * a * c;
     if (cond < 0) {
         return null
     }
-    // NOTICE: Use smaller r
     const d1 = (-b - Math.sqrt(cond)) / (2 * a);
     const d2 = (-b + Math.sqrt(cond)) / (2 * a);
-    const d = select ? d1 : d2;
+    const d = R > 0 ? d1 : d2;
     const tx = s.x + d * n.x;
     const ty = s.y + d * n.y;
+    // TODO: Workarounds
     if (Math.abs(ty) > r || d < 0) {
         return null
-    } else {
-        return vec(tx, ty)
     }
+    if (R >= 0 && tx >= cl.x) {
+        return null
+    }
+    if (R < 0 && tx < cl.x) {
+        return null
+    }
+    return vec(tx, ty)
 }
 
-//================================
-// Lens
-//================================
-
 export const fGaussian = (f: number, px: number, py: number) => {
     const qx = f * px / (px - f)
     const qy = py * (qx / px)
@@ -271,12 +272,15 @@ export const calcRMax = (lens: any) => {
     const c2 = vec(lens.x2 + R2, 0)
     if (intersectCC(c1, Math.abs(R1), c2, Math.abs(R2))) {
         const [p1, p2] = intersectionCC(c1, Math.abs(R1), c2, Math.abs(R2))
-        // TODO:
-        // const minR = Math.min(Math.abs(R1), Math.abs(R2))
-        // items.value[props.idx].r = Math.abs(p1.y) // DANGER!!
-        return Math.abs(p1.y)
+        const dc1 = c1.x - p1.x
+        const dc2 = c2.x - p2.x
+        const minR = Math.min(Math.abs(R1), Math.abs(R2))
+        if (dc1 * dc2 < 0) {
+            return Math.min(minR, Math.abs(p1.y))
+        } else {
+            return minR
+        }
     } else {
-        // items.value[props.idx].r = Math.min(Math.abs(R1), Math.abs(R2)) // DANGER!!
         return Math.min(Math.abs(R1), Math.abs(R2))
     }
 }
\ No newline at end of file

From 0e5b20f2c1d561a56d527574ca0f51a079c70894 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 24 Jun 2024 02:28:59 +0900
Subject: [PATCH 14/53] Better R1, R2 edit

---
 src/SVG/Lens.vue | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 92e1a79..2bda569 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -131,12 +131,17 @@ const r1MoveStartHandler = (e: any) => {
     const leftX0 = leftX.value
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (Math.abs(leftX0 - (x10 + d.x)) <= r0) {
-            const a = x10 + d.x - leftX0
-            const R1n = (-r0 * r0 - a * a) / (2 * a)
-            items.value[props.idx].R1 = R1n
-            items.value[props.idx].x1 = x10 + d.x
+        let x1n = x10 + d.x
+        if (leftX0 - x1n > r0) {
+            x1n = leftX0 - r0
+        }
+        if (x1n > props.lens.x2) {
+            x1n = props.lens.x2
         }
+        const a = x1n - leftX0
+        const R1n = (-r0 * r0 - a * a) / (2 * a)
+        items.value[props.idx].R1 = R1n
+        items.value[props.idx].x1 = x1n
     })
 }
 
@@ -148,12 +153,17 @@ const r2MoveStartHandler = (e: any) => {
     const rightX0 = rightX.value
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (Math.abs((x20 + d.x) - rightX0) <= r0) {
-            const a = x20 + d.x - rightX0
-            const R1n = (-r0 * r0 - a * a) / (2 * a)
-            items.value[props.idx].R2 = R1n
-            items.value[props.idx].x2 = x20 + d.x
+        let x2n = x20 + d.x
+        if (x2n - rightX0 > r0) {
+            x2n = r0 + rightX0
+        }
+        if (x2n < props.lens.x1) {
+            x2n = props.lens.x1
         }
+        const a = x2n - rightX0
+        const R2n = (-r0 * r0 - a * a) / (2 * a)
+        items.value[props.idx].R2 = R2n
+        items.value[props.idx].x2 = x2n
     })
 }
 

From 4edbb43d7785863da14780a29164410ccf1399cb Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 24 Jun 2024 02:42:03 +0900
Subject: [PATCH 15/53] Better lens move UI

---
 src/SVG/Lens.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 2bda569..dcba438 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -57,6 +57,19 @@ const rightX = computed(() => {
     }
 })
 
+const path = computed(() => {
+    let d = ""
+    d += `M ${leftX.value} ${-r.value} `
+    const absR1 = Math.abs(props.lens.R1)
+    const sweep1 = props.lens.R1 > 0 ? 0 : 1
+    d += `A ${absR1} ${absR1} 0 0 ${sweep1} ${leftX.value} ${r.value} `
+    d += `L ${rightX.value} ${r.value}`
+    const absR2 = Math.abs(props.lens.R2)
+    const sweep2 = props.lens.R2 > 0 ? 1 : 0
+    d += `A ${absR2} ${absR2} 0 0 ${sweep2} ${rightX.value} ${-r.value} `
+    return d
+})
+
 const path1 = computed(() => {
     const absR1 = Math.abs(props.lens.R1)
     const sweep = props.lens.R1 > 0 ? 0 : 1
@@ -238,8 +251,7 @@ const apertureSizeChangeStartHandler = (e: any) => {
         <!-- Lens -->
         <g class="hover-parent">
             <!-- dummy for ui -->
-            <rect class='ui-transparent' :x="lens.x1" :y="-r" :width="lens.x2 - lens.x1" :height="2 * r"
-                @mousedown="moveStartHandler" />
+            <path :d="path" class='ui-transparent' @mousedown="moveStartHandler"/>
             <!-- Background -->
             <g class="hover-child-bg fill-none">
                 <!-- left -->

From 6965afe78acf58bd3b2438a6e68bd1784152c1bd Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 24 Jun 2024 12:56:18 +0900
Subject: [PATCH 16/53] Better rMax calculation

---
 src/SVG/Lens.vue |  1 +
 src/math.ts      | 26 ++++++++++++++------------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index dcba438..6163be8 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -151,6 +151,7 @@ const r1MoveStartHandler = (e: any) => {
         if (x1n > props.lens.x2) {
             x1n = props.lens.x2
         }
+        // TODO: Fix here
         const a = x1n - leftX0
         const R1n = (-r0 * r0 - a * a) / (2 * a)
         items.value[props.idx].R1 = R1n
diff --git a/src/math.ts b/src/math.ts
index 3f4dbb3..a5e835c 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -266,21 +266,23 @@ export const calcLensF = (lens: any) => {
 }
 
 export const calcRMax = (lens: any) => {
-    const R1 = lens.R1
-    const R2 = lens.R2
-    const c1 = vec(lens.x1 + R1, 0)
-    const c2 = vec(lens.x2 + R2, 0)
-    if (intersectCC(c1, Math.abs(R1), c2, Math.abs(R2))) {
-        const [p1, p2] = intersectionCC(c1, Math.abs(R1), c2, Math.abs(R2))
-        const dc1 = c1.x - p1.x
-        const dc2 = c2.x - p2.x
-        const minR = Math.min(Math.abs(R1), Math.abs(R2))
-        if (dc1 * dc2 < 0) {
-            return Math.min(minR, Math.abs(p1.y))
+    const R1 = Math.abs(lens.R1)
+    const R2 = Math.abs(lens.R2)
+    const c1 = vec(lens.x1 + lens.R1, 0)
+    const c2 = vec(lens.x2 + lens.R2, 0)
+    const minR = Math.min(R1, R2)
+    if (intersectCC(c1, R1, c2, R2)) {
+        const [p1, p2] = intersectionCC(c1, R1, c2, R2)
+        const l1 = Math.min(lens.x1, c1.x)
+        const r1 = Math.max(lens.x1, c1.x)
+        const l2 = Math.min(lens.x2, c2.x)
+        const r2 = Math.max(lens.x2, c2.x)
+        if ((l1 < p1.x && p1.x < r1) && (l2 < p1.x && p1.x < r2)) {
+            return Math.abs(p1.y)
         } else {
             return minR
         }
     } else {
-        return Math.min(Math.abs(R1), Math.abs(R2))
+        return minR
     }
 }
\ No newline at end of file

From 33bc0168545b2735c479b6183cabe84543416e55 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 24 Jun 2024 13:19:06 +0900
Subject: [PATCH 17/53] Better lens curvature change

---
 src/SVG/Lens.vue | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 6163be8..e38eb1c 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -145,13 +145,22 @@ const r1MoveStartHandler = (e: any) => {
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         let x1n = x10 + d.x
-        if (leftX0 - x1n > r0) {
-            x1n = leftX0 - r0
+        if (x1n < maxLightX.value) {
+            x1n = maxLightX.value
         }
         if (x1n > props.lens.x2) {
             x1n = props.lens.x2
         }
-        // TODO: Fix here
+        if (leftX0 - x1n > r0) {
+            items.value[props.idx].R1 = r0
+            items.value[props.idx].x1 = x1n
+            return
+        }
+        if (x1n - leftX0 > r0) {
+            items.value[props.idx].R1 = -r0
+            items.value[props.idx].x1 = x1n
+            return
+        }
         const a = x1n - leftX0
         const R1n = (-r0 * r0 - a * a) / (2 * a)
         items.value[props.idx].R1 = R1n
@@ -168,12 +177,22 @@ const r2MoveStartHandler = (e: any) => {
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         let x2n = x20 + d.x
-        if (x2n - rightX0 > r0) {
-            x2n = r0 + rightX0
-        }
         if (x2n < props.lens.x1) {
             x2n = props.lens.x1
         }
+        if (x2n > sensor.value.x) {
+            x2n = sensor.value.x
+        }
+        if (x2n - rightX0 > r0) {
+            items.value[props.idx].R2 = -r0
+            items.value[props.idx].x2 = x2n
+            return
+        }
+        if (rightX0 - x2n > r0) {
+            items.value[props.idx].R2 = r0
+            items.value[props.idx].x2 = x2n
+            return
+        }
         const a = x2n - rightX0
         const R2n = (-r0 * r0 - a * a) / (2 * a)
         items.value[props.idx].R2 = R2n
@@ -252,7 +271,7 @@ const apertureSizeChangeStartHandler = (e: any) => {
         <!-- Lens -->
         <g class="hover-parent">
             <!-- dummy for ui -->
-            <path :d="path" class='ui-transparent' @mousedown="moveStartHandler"/>
+            <path :d="path" class='ui-transparent' @mousedown="moveStartHandler" />
             <!-- Background -->
             <g class="hover-child-bg fill-none">
                 <!-- left -->

From 70b0ea7e2fc7aed32b6e307883a7026ec601e824 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 24 Jun 2024 19:43:33 +0900
Subject: [PATCH 18/53] Lens selection

---
 src/SVG/Lens.vue | 10 +++++++---
 src/globals.ts   | 10 ++++++++--
 src/handlers.ts  |  3 ++-
 src/type.ts      |  1 +
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index e38eb1c..dc8a9ad 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { items, sensor, options, style, rUI, maxLightX } from '../globals'
+import { items, releaseAllLenses, sensor, options, style, rUI, maxLightX } from '../globals'
 import { calcLensF, calcRMax } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import type { Lens } from '../type'
@@ -84,11 +84,15 @@ const path2 = computed(() => {
 
 const moveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
+    // Selection
+    if (!e.shiftKey && !props.lens.selected) {
+        releaseAllLenses()
+    }
+    items.value[props.idx].selected = true
+
     const m0 = getPositionOnSvg(e);
     const x10 = props.lens.x1;
     const x20 = props.lens.x2;
-    // const leftX0 = leftX.value
-    // const rightX0 = rightX.value
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         if (x10 + d.x < maxLightX.value) {
diff --git a/src/globals.ts b/src/globals.ts
index 8cef7e0..baeb8f2 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -43,12 +43,18 @@ export const lights = ref(lights0())
 
 export const items0 = (): Lens[] => {
     return [
-        { x1: -106, x2: -100, R1: -50, R2: -25, r: 10, n: 1.5, aperture: 1 },
-        { x1: 0, x2: 6, R1: 25, R2: -50, r: 10, n: 1.5, aperture: 1 },
+        { x1: -106, x2: -100, R1: -50, R2: -25, r: 10, n: 1.5, aperture: 1, selected: false },
+        { x1: 0, x2: 6, R1: 25, R2: -50, r: 10, n: 1.5, aperture: 1, selected: false },
     ]
 }
 export const items = ref(items0())
 
+export const releaseAllLenses = () => {
+    for (let i = 0; i < items.value.length; i++) {
+        items.value[i].selected = false
+    }
+}
+
 //--------------------------------
 // Sensor
 //--------------------------------
diff --git a/src/handlers.ts b/src/handlers.ts
index 6593eaa..d763ac0 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import { state, lights, sensor, minLensX, maxLensX } from "./globals";
+import { state, lights, sensor, minLensX, maxLensX, releaseAllLenses } from "./globals";
 import { Light } from './type'
 import { vec, Vec } from './math'
 
@@ -45,6 +45,7 @@ export const svgMoveStartHandler = (e: any) => {
     e.preventDefault();
     const m0 = getPositionOnSvg(e);
     const c0 = state.value.c.copy()
+    releaseAllLenses()
     moveHandler = (e_: any) => {
         let clientX = e_.clientX
         let clientY = e_.clientY
diff --git a/src/type.ts b/src/type.ts
index 93c2a46..070eca7 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -12,4 +12,5 @@ export type Lens = {
     r: number,
     n: number,
     aperture: number,
+    selected: boolean,
 }
\ No newline at end of file

From a5be34ffe6852683ff3ae1f529bfa2d5810c111d Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 24 Jun 2024 21:52:49 +0900
Subject: [PATCH 19/53] Multiple lens move

---
 src/SVG/Lens.vue | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index dc8a9ad..3b634d2 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -91,19 +91,24 @@ const moveStartHandler = (e: any) => {
     items.value[props.idx].selected = true
 
     const m0 = getPositionOnSvg(e);
-    const x10 = props.lens.x1;
-    const x20 = props.lens.x2;
+    // const x10 = props.lens.x1;
+    // const x20 = props.lens.x2;
+    const x10s = items.value.map((lens) => lens.x1)
+    const x20s = items.value.map((lens) => lens.x2)
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (x10 + d.x < maxLightX.value) {
-            items.value[props.idx].x1 = maxLightX.value
-            items.value[props.idx].x2 = maxLightX.value + (x20 - x10)
-        } else if (x20 + d.x > sensor.value.x) {
-            items.value[props.idx].x1 = sensor.value.x - (x20 - x10)
-            items.value[props.idx].x2 = sensor.value.x
-        } else {
-            items.value[props.idx].x1 = x10 + d.x
-            items.value[props.idx].x2 = x20 + d.x
+        for (let i=0;i<items.value.length;i++){
+            if (x10s[i] + d.x < maxLightX.value) {
+                d.x = maxLightX.value - x10s[i]
+            } else if (x20s[i] + d.x > sensor.value.x) {
+                d.x = sensor.value.x - x20s[i]
+            }
+        }
+        for (let i=0;i<items.value.length;i++){
+            if (items.value[i].selected) {
+                items.value[i].x1 = x10s[i] + d.x
+                items.value[i].x2 = x20s[i] + d.x
+            }
         }
     })
 }

From e0b38e1246fc63d6e324118bab78386f83bd4020 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 24 Jun 2024 23:15:01 +0900
Subject: [PATCH 20/53] Cursors and fix maxLensX calculation

---
 src/SVG/Lens.vue    | 26 +++++++++++++++-----------
 src/SVG/SVG.vue     | 29 +++++++++++++++++++++++------
 src/assets/main.css | 27 +++++++++++++++++++++++++++
 src/globals.ts      |  2 +-
 4 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 3b634d2..0211e57 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -97,14 +97,14 @@ const moveStartHandler = (e: any) => {
     const x20s = items.value.map((lens) => lens.x2)
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        for (let i=0;i<items.value.length;i++){
+        for (let i = 0; i < items.value.length; i++) {
             if (x10s[i] + d.x < maxLightX.value) {
                 d.x = maxLightX.value - x10s[i]
             } else if (x20s[i] + d.x > sensor.value.x) {
                 d.x = sensor.value.x - x20s[i]
             }
         }
-        for (let i=0;i<items.value.length;i++){
+        for (let i = 0; i < items.value.length; i++) {
             if (items.value[i].selected) {
                 items.value[i].x1 = x10s[i] + d.x
                 items.value[i].x2 = x20s[i] + d.x
@@ -280,7 +280,7 @@ const apertureSizeChangeStartHandler = (e: any) => {
         <!-- Lens -->
         <g class="hover-parent">
             <!-- dummy for ui -->
-            <path :d="path" class='ui-transparent' @mousedown="moveStartHandler" />
+            <path :d="path" class='transparent grab' @mousedown="moveStartHandler" />
             <!-- Background -->
             <g class="hover-child-bg fill-none">
                 <!-- left -->
@@ -306,16 +306,18 @@ const apertureSizeChangeStartHandler = (e: any) => {
         </g>
 
         <!-- Thickness change UI -->
-        <g class="fill-none" pointer-events="stroke">
+        <g class="ui-stroke transparent horizontal-resize">
             <!-- left -->
-            <path :d="path1" class="ui-hidden" @mousedown="x1MoveStartHandler" />
+            <path :d="path1" @mousedown="x1MoveStartHandler" />
             <!-- right -->
-            <path :d="path2" class="ui-hidden" @mousedown="x2MoveStartHandler" />
+            <path :d="path2" @mousedown="x2MoveStartHandler" />
         </g>
 
         <!-- Curvature change UI -->
-        <circle :cx="lens.x1" :cy="0" :r="rUI" class="ui-hidden" @mousedown="r1MoveStartHandler"></circle>
-        <circle :cx="lens.x2" :cy="0" :r="rUI" class="ui-hidden" @mousedown="r2MoveStartHandler"></circle>
+        <g class="horizontal-resize">
+            <circle class="ui-hidden" :cx="lens.x1" :cy="0" :r="rUI" @mousedown="r1MoveStartHandler"></circle>
+            <circle class="ui-hidden" :cx="lens.x2" :cy="0" :r="rUI" @mousedown="r2MoveStartHandler"></circle>
+        </g>
 
         <!-- Focal points -->
         <g v-if="options.lensFocalPoints">
@@ -339,8 +341,10 @@ const apertureSizeChangeStartHandler = (e: any) => {
         </g>
 
         <!-- Lens size change UI-->
-        <circle :cx="(leftX + rightX) / 2" :cy="-r" :r="rUI" class="ui-hidden" @mousedown="lensSizeChangeStartHandler">
-        </circle>
+        <g class="ui-stroke transparent vertical-resize" @mousedown="lensSizeChangeStartHandler">
+            <circle :cx="(leftX + rightX) / 2" :cy="-r" :r="rUI"></circle>
+            <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
+        </g>
 
         <!-- Aperture -->
         <g v-if="options.aperture">
@@ -357,7 +361,7 @@ const apertureSizeChangeStartHandler = (e: any) => {
             </g>
             <!-- UI -->
             <circle :cx="xm" :cy="r * lens.aperture" :r="rUI" @mousedown="apertureSizeChangeStartHandler"
-                class="hover-sibling-master ui-hidden"></circle>
+                class="ui-hidden vertical-resize"></circle>
         </g>
     </g>
 </template>
\ No newline at end of file
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 6e054d6..2deadad 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -52,7 +52,7 @@ const strokeDashArray = computed(() => {
 </script>
 
 <template>
-  <svg id="main-svg" ref="svg" :view-box.camel="svgViewBox" :width="state.width" :height="state.height"
+  <svg id="main-svg" class="move" ref="svg" :view-box.camel="svgViewBox" :width="state.width" :height="state.height"
     @mousedown="h.svgMoveStartHandler" @mousemove="h.svgMoveHandler" @mouseup="h.svgMoveEndHandler"
     @mouseleave="h.svgMoveEndHandler" @wheel="h.svgScaleHandler" @dblclick="h.addLight">
 
@@ -89,11 +89,11 @@ const strokeDashArray = computed(() => {
         <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" :fill="`hsl(${light.color}, 100%, 50%, 0.5)`"></circle>
         <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" class="ui-bg"></circle>
         <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" @dblclick="h.deleteLight($event, idx)"
-          @mousedown="h.lightMoveStartHandler($event, idx)" class="ui">
+          @mousedown="h.lightMoveStartHandler($event, idx)" class="ui grab">
         </circle>
       </g>
       <g v-if="light.type === Light.Parallel">
-        <LightParallel :light :idx></LightParallel>
+        <LightParallel :light :idx class="grab"></LightParallel>
       </g>
     </g>
 
@@ -103,11 +103,12 @@ const strokeDashArray = computed(() => {
         <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="hover-child-bg" />
         <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="hover-child" />
         <!-- dummy for ui -->
-        <rect :x="sensor.x - rUI" :y="-sensor.r" :width="rUI * 2" :height="2 * sensor.r"
-          @mousedown="h.sensorMoveStartHandler" class='ui-transparent' />
+        <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="ui-stroke transparent grab"
+          @mousedown="h.sensorMoveStartHandler" />
       </g>
 
-      <circle :cx="sensor.x" :cy="-sensor.r" :r="rUI" class="ui-hidden" @mousedown="h.sensorSizeChangeStartHandler">
+      <circle :cx="sensor.x" :cy="-sensor.r" :r="rUI" class="transparent vertical-resize"
+        @mousedown="h.sensorSizeChangeStartHandler">
       </circle>
     </g>
   </svg>
@@ -239,4 +240,20 @@ svg {
   stroke-width: v-bind('strokeWidth.thickerBg');
   fill: none;
 }
+
+.transparent {
+  fill: transparent;
+  color: transparent;
+  stroke: transparent;
+}
+
+.ui-stroke {
+  stroke-width: v-bind((2 * rUI));
+  pointer-events: stroke;
+
+  circle {
+    stroke-width: 0;
+    pointer-events: all;
+  }
+}
 </style>
diff --git a/src/assets/main.css b/src/assets/main.css
index 4e41b69..bb7c4ba 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,3 +1,30 @@
 body {
     margin: 0;
+}
+
+.grab {
+    cursor: -webkit-grab;
+    cursor: grab;
+}
+
+.grab:active {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+
+.grabbing {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+
+.move {
+    cursor: move;
+}
+
+.horizontal-resize {
+    cursor: col-resize;
+}
+
+.vertical-resize {
+    cursor: row-resize;
 }
\ No newline at end of file
diff --git a/src/globals.ts b/src/globals.ts
index baeb8f2..cab2a52 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -222,7 +222,7 @@ export const minLensX = computed(() => {
 export const maxLensX = computed(() => {
     let maxX = -infR.value
     for (const lens of items.value) {
-        maxX = Math.min(maxX, lens.x2)
+        maxX = Math.max(maxX, lens.x2)
     }
     return maxX
 })

From c037a03dfcab72d88b05142bba030149f2d2a0cb Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Wed, 26 Jun 2024 13:05:53 +0900
Subject: [PATCH 21/53] Lens deletion

---
 src/Controller.vue |  8 +++++++-
 src/SVG/Lens.vue   |  7 ++++++-
 src/globals.ts     | 20 +++++++++++++++-----
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/Controller.vue b/src/Controller.vue
index 5973c17..0cdb733 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { state, sensor, appleProps, options, style } from './globals'
+import { state, items, defaultConvexLens, defaultConcaveLens, sensor, appleProps, options, style } from './globals'
 import { humanReadable } from './utils';
 import { Light } from "./type"
 
@@ -88,6 +88,12 @@ const nRays = computed(() => {
                 <tr>
                     <td><label><input type="checkbox" v-model="options.lensIdeal"> Ideal lens</label></td>
                 </tr>
+                <tr>
+                    <td>
+                        <button @click="items.push(defaultConvexLens(0))">Add convex lens</button>
+                        <button @click="items.push(defaultConcaveLens(0))">Add concave lens</button>
+                    </td>
+                </tr>
                 <!-- <tr>
                     <td>Refractive index</td>
                     <td><input type="range" min="1.01" max="3" step="0.001" v-model.number="lens.n"></td>
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 0211e57..a4b465c 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -255,6 +255,11 @@ const apertureSizeChangeStartHandler = (e: any) => {
     })
 }
 
+const deleteLens = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    items.value.splice(props.idx, 1)
+}
+
 </script>
 
 <template>
@@ -280,7 +285,7 @@ const apertureSizeChangeStartHandler = (e: any) => {
         <!-- Lens -->
         <g class="hover-parent">
             <!-- dummy for ui -->
-            <path :d="path" class='transparent grab' @mousedown="moveStartHandler" />
+            <path :d="path" class='transparent grab' @mousedown="moveStartHandler" @dblclick="deleteLens" />
             <!-- Background -->
             <g class="hover-child-bg fill-none">
                 <!-- left -->
diff --git a/src/globals.ts b/src/globals.ts
index cab2a52..89b8975 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -30,9 +30,9 @@ export const lights0 = ():
     )[] => {
     return [
         // { type: Light.Point, c: vec(-200, 20), color: 0 }, // red
-        { type: Light.Point, c: vec(-160, 0), color: 120 }, // green
+        // { type: Light.Point, c: vec(-160, 0), color: 120 }, // green
         // { type: Light.Point, c: vec(-120, -20), color: 240 }, // blue
-        // { type: Light.Parallel, s: vec(-180, -30), t: vec(-180, 30), color: 120 }, // green
+        { type: Light.Parallel, s: vec(-180, -30), t: vec(-180, 30), color: 120 }, // green
     ]
 }
 export const lights = ref(lights0())
@@ -41,10 +41,20 @@ export const lights = ref(lights0())
 // Items
 //--------------------------------
 
+export const defaultConvexLens = (x: number) => {
+    const d = 10
+    const R = 70
+    return { x1: x - d / 2, x2: x + d / 2, R1: R, R2: -R, r: 20, n: 1.5, aperture: 1, selected: false }
+}
+
+export const defaultConcaveLens = (x: number) => {
+    const R = 30
+    return { x1: x - 2, x2: x + 2, R1: -R, R2: R, r: 10, n: 1.5, aperture: 1, selected: false }
+}
+
 export const items0 = (): Lens[] => {
     return [
-        { x1: -106, x2: -100, R1: -50, R2: -25, r: 10, n: 1.5, aperture: 1, selected: false },
-        { x1: 0, x2: 6, R1: 25, R2: -50, r: 10, n: 1.5, aperture: 1, selected: false },
+        defaultConvexLens(0),
     ]
 }
 export const items = ref(items0())
@@ -146,7 +156,7 @@ export const options0 = () => {
     return {
         advanced: false,
         lens: true,
-        lensIdeal: false,
+        lensIdeal: true,
         lensFocalPoints: false,
         lensDoubleFocalPoints: false,
         hyperfocalPoint: false,

From 7ec71d38fab363a282cd933b17f8994c61a3899d Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Wed, 26 Jun 2024 14:57:11 +0900
Subject: [PATCH 22/53] Use lens group

---
 src/Canvas.vue        |   9 ++--
 src/Controller.vue    |   6 +--
 src/SVG/Guideline.vue |   4 +-
 src/SVG/Lens.vue      | 113 +++++++++++++++++++++++-------------------
 src/SVG/LensGroup.vue |  27 ++++++++++
 src/SVG/SVG.vue       |   8 +--
 src/globals.ts        |  28 +++++++----
 src/type.ts           |   4 ++
 8 files changed, 123 insertions(+), 76 deletions(-)
 create mode 100644 src/SVG/LensGroup.vue

diff --git a/src/Canvas.vue b/src/Canvas.vue
index a69c61c..2cb411a 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { watch, onMounted, ref } from 'vue'
 
-import { state, lights, items, sensor, sensorData, apple, options, style, infR } from './globals'
+import { state, lights, lensGroups, sensor, sensorData, apple, options, style, infR } from './globals'
 import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS, calcRMax } from './math'
 
-import { Light } from './type'
+import { Light, type Lens, type LensGroup } from './type'
 
 // Reference to the canvas
 const canvas = ref()
@@ -30,7 +30,8 @@ const drawSegment = (p: Vec, v: Vec, length: number) => {
 const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
 
   // Multiple lens
-  const lenses = items.value.filter(() => true)
+  // const lenses = items.value.filter(() => true)
+  const lenses = lensGroups.value.reduce((acc: Lens[], cur: LensGroup) => { return acc.concat(cur.lenses) }, [])
   lenses.sort((a, b) => { return a.x1 - b.x1 })
   for (const lens of lenses) {
     const s0 = s.copy()
@@ -260,7 +261,7 @@ onMounted(() => {
 })
 
 // TODO: Optimize here ('deep' is enabled)
-watch([state, lights, apple, items, sensor, options, style], () => {
+watch([state, lights, apple, lensGroups, sensor, options, style], () => {
   canvas.value.width = state.value.width
   canvas.value.height = state.value.height
   offscreenCanvas.width = state.value.width
diff --git a/src/Controller.vue b/src/Controller.vue
index 0cdb733..c888786 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { state, items, defaultConvexLens, defaultConcaveLens, sensor, appleProps, options, style } from './globals'
+import { state, lensGroups, defaultConvexLens, defaultConcaveLens, sensor, appleProps, options, style } from './globals'
 import { humanReadable } from './utils';
 import { Light } from "./type"
 
@@ -90,8 +90,8 @@ const nRays = computed(() => {
                 </tr>
                 <tr>
                     <td>
-                        <button @click="items.push(defaultConvexLens(0))">Add convex lens</button>
-                        <button @click="items.push(defaultConcaveLens(0))">Add concave lens</button>
+                        <button @click="lensGroups.push({ lenses: [defaultConvexLens(0)] })">Add convex lens</button>
+                        <button @click="lensGroups.push({ lenses: [defaultConcaveLens(0)] })">Add concave lens</button>
                     </td>
                 </tr>
                 <!-- <tr>
diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index 55ec066..6b73ef3 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { items, sensor, options, infR } from '../globals'
+import { lensGroups, sensor, options, infR } from '../globals'
 
 import { vec, fGaussian, calcLensF } from '../math'
 
 const lens = computed(() => {
-    return items.value[0]
+    return lensGroups.value[0].lenses[0]
 })
 
 const x = computed(() => {
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index a4b465c..fb10e7b 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { items, releaseAllLenses, sensor, options, style, rUI, maxLightX } from '../globals'
+import { lensGroups, releaseAllLenses, sensor, options, style, rUI, maxLightX } from '../globals'
 import { calcLensF, calcRMax } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import type { Lens } from '../type'
@@ -8,7 +8,6 @@ import type { Lens } from '../type'
 // const props = defineProps(['lens', 'idx'])
 const props = defineProps<{
     lens: Lens
-    idx: number
 }>()
 
 const f = computed(() => {
@@ -84,47 +83,57 @@ const path2 = computed(() => {
 
 const moveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
+    const lens = props.lens
     // Selection
     if (!e.shiftKey && !props.lens.selected) {
         releaseAllLenses()
     }
-    items.value[props.idx].selected = true
+    lens.selected = true
 
     const m0 = getPositionOnSvg(e);
-    // const x10 = props.lens.x1;
-    // const x20 = props.lens.x2;
-    const x10s = items.value.map((lens) => lens.x1)
-    const x20s = items.value.map((lens) => lens.x2)
+    const x10s = lensGroups.value.map((lensGroup) => lensGroup.lenses.map((lens) => lens.x1))
+    const x20s = lensGroups.value.map((lensGroup) => lensGroup.lenses.map((lens) => lens.x2))
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        for (let i = 0; i < items.value.length; i++) {
-            if (x10s[i] + d.x < maxLightX.value) {
-                d.x = maxLightX.value - x10s[i]
-            } else if (x20s[i] + d.x > sensor.value.x) {
-                d.x = sensor.value.x - x20s[i]
-            }
-        }
-        for (let i = 0; i < items.value.length; i++) {
-            if (items.value[i].selected) {
-                items.value[i].x1 = x10s[i] + d.x
-                items.value[i].x2 = x20s[i] + d.x
+        // Fix d.x within maxLightX < d.x < sensor.x
+        for (let i = 0; i < lensGroups.value.length; i++) {
+            for (let j = 0; j < lensGroups.value[i].lenses.length; j++) {
+                if (x10s[i][j] + d.x < maxLightX.value) {
+                    if (Math.abs(maxLightX.value - x10s[i][j]) < Math.abs(d.x)) {
+                        d.x = maxLightX.value - x10s[i][j]
+                    }
+                } else if (x20s[i][j] + d.x > sensor.value.x) {
+                    if (Math.abs(sensor.value.x - x20s[i][j]) < Math.abs(d.x)) {
+                        d.x = sensor.value.x - x20s[i][j]
+                    }
+                }
             }
         }
+        // Update x1 and x2
+        lensGroups.value.forEach((lensGroup, i) => {
+            lensGroup.lenses.forEach((lens, j) => {
+                if (lens.selected) {
+                    lens.x1 = x10s[i][j] + d.x
+                    lens.x2 = x20s[i][j] + d.x
+                }
+            })
+        })
     })
 }
 
 const x1MoveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
-    const x10 = props.lens.x1;
+    const lens = props.lens
+    const x10 = lens.x1;
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         if (x10 + d.x < maxLightX.value) {
-            items.value[props.idx].x1 = maxLightX.value
+            lens.x1 = maxLightX.value
         } else if (x10 + d.x > props.lens.x2) {
-            items.value[props.idx].x1 = props.lens.x2
+            lens.x1 = props.lens.x2
         } else {
-            items.value[props.idx].x1 = x10 + d.x
+            lens.x1 = x10 + d.x
         }
     })
 }
@@ -132,15 +141,16 @@ const x1MoveStartHandler = (e: any) => {
 const x2MoveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
-    const x20 = props.lens.x2
+    const lens = props.lens
+    const x20 = lens.x2
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         if (x20 + d.x < props.lens.x1) {
-            items.value[props.idx].x2 = props.lens.x1
+            lens.x2 = props.lens.x1
         } else if (x20 + d.x > sensor.value.x) {
-            items.value[props.idx].x2 = sensor.value.x
+            lens.x2 = sensor.value.x
         } else {
-            items.value[props.idx].x2 = x20 + d.x
+            lens.x2 = x20 + d.x
         }
     })
 }
@@ -148,8 +158,9 @@ const x2MoveStartHandler = (e: any) => {
 const r1MoveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
+    const lens = props.lens
     const r0 = r.value
-    const x10 = props.lens.x1
+    const x10 = lens.x1
     const leftX0 = leftX.value
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
@@ -161,27 +172,28 @@ const r1MoveStartHandler = (e: any) => {
             x1n = props.lens.x2
         }
         if (leftX0 - x1n > r0) {
-            items.value[props.idx].R1 = r0
-            items.value[props.idx].x1 = x1n
+            lens.R1 = r0
+            lens.x1 = x1n
             return
         }
         if (x1n - leftX0 > r0) {
-            items.value[props.idx].R1 = -r0
-            items.value[props.idx].x1 = x1n
+            lens.R1 = -r0
+            lens.x1 = x1n
             return
         }
         const a = x1n - leftX0
         const R1n = (-r0 * r0 - a * a) / (2 * a)
-        items.value[props.idx].R1 = R1n
-        items.value[props.idx].x1 = x1n
+        lens.R1 = R1n
+        lens.x1 = x1n
     })
 }
 
 const r2MoveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
+    const lens = props.lens
     const r0 = r.value
-    const x20 = props.lens.x2
+    const x20 = lens.x2
     const rightX0 = rightX.value
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
@@ -193,34 +205,35 @@ const r2MoveStartHandler = (e: any) => {
             x2n = sensor.value.x
         }
         if (x2n - rightX0 > r0) {
-            items.value[props.idx].R2 = -r0
-            items.value[props.idx].x2 = x2n
+            lens.R2 = -r0
+            lens.x2 = x2n
             return
         }
         if (rightX0 - x2n > r0) {
-            items.value[props.idx].R2 = r0
-            items.value[props.idx].x2 = x2n
+            lens.R2 = r0
+            lens.x2 = x2n
             return
         }
         const a = x2n - rightX0
         const R2n = (-r0 * r0 - a * a) / (2 * a)
-        items.value[props.idx].R2 = R2n
-        items.value[props.idx].x2 = x2n
+        lens.R2 = R2n
+        lens.x2 = x2n
     })
 }
 
 const lensSizeChangeStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
+    const lens = props.lens
     const r0 = props.lens.r;
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         if (r0 - d.y < 0.1) {
-            items.value[props.idx].r = 0.1
+            lens.r = 0.1
         } else if (r0 - d.y > rMax.value) {
-            items.value[props.idx].r = rMax.value
+            lens.r = rMax.value
         } else {
-            items.value[props.idx].r = r0 - d.y
+            lens.r = r0 - d.y
         }
     })
 }
@@ -241,25 +254,21 @@ const lensSizeChangeStartHandler = (e: any) => {
 const apertureSizeChangeStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
+    const lens = props.lens
     const a0 = props.lens.aperture * r.value;
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         const an = (a0 + d.y) / r.value;
         if (an < 0) {
-            items.value[props.idx].aperture = 0;
+            lens.aperture = 0;
         } else if (an > 1) {
-            items.value[props.idx].aperture = 1;
+            lens.aperture = 1;
         } else {
-            items.value[props.idx].aperture = an;
+            lens.aperture = an;
         }
     })
 }
 
-const deleteLens = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    items.value.splice(props.idx, 1)
-}
-
 </script>
 
 <template>
@@ -285,7 +294,7 @@ const deleteLens = (e: any) => {
         <!-- Lens -->
         <g class="hover-parent">
             <!-- dummy for ui -->
-            <path :d="path" class='transparent grab' @mousedown="moveStartHandler" @dblclick="deleteLens" />
+            <path :d="path" class='transparent grab' @mousedown="moveStartHandler" />
             <!-- Background -->
             <g class="hover-child-bg fill-none">
                 <!-- left -->
diff --git a/src/SVG/LensGroup.vue b/src/SVG/LensGroup.vue
new file mode 100644
index 0000000..497d6e2
--- /dev/null
+++ b/src/SVG/LensGroup.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { lensGroups, releaseAllLenses, sensor, options, style, rUI, maxLightX } from '../globals'
+import { calcLensF, calcRMax } from '../math'
+import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
+import { type LensGroup } from '../type'
+
+import Lens from './Lens.vue'
+
+// const props = defineProps(['lens', 'idx'])
+const props = defineProps<{
+    lensGroup: LensGroup
+    idx: number
+}>()
+
+const deleteLensGroup = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    lensGroups.value.splice(props.idx, 1)
+}
+
+</script>
+
+<template>
+    <g v-for="(lens, idx) in lensGroup.lenses" @dblclick="deleteLensGroup">
+        <Lens :lens></Lens>
+    </g>
+</template>
\ No newline at end of file
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 2deadad..93a46c5 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import { state, lights, items, sensor, style, apple, options, infR, rUI } from '../globals'
+import { state, lights, lensGroups, sensor, style, apple, options, infR, rUI } from '../globals'
 import * as h from '../handlers'
 import { Light } from '../type'
 
 import Grid from './Grid.vue'
 import Guideline from './Guideline.vue'
 import LightParallel from './LightParallel.vue'
-import Lens from './Lens.vue'
+import LensGroup from './LensGroup.vue'
 
 // Reference to the svg element
 // This is needed for handles in handlers.ts
@@ -69,8 +69,8 @@ const strokeDashArray = computed(() => {
 
     <!-- Items -->
     <g v-if="options.lens">
-      <g v-for="(item, idx) in items">
-        <Lens :lens="item" :idx></Lens>
+      <g v-for="(lensGroup, idx) in lensGroups">
+          <LensGroup :lensGroup :idx></LensGroup>
       </g>
     </g>
 
diff --git a/src/globals.ts b/src/globals.ts
index 89b8975..84fd95d 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -1,6 +1,6 @@
 import { ref, computed } from "vue"
 import { Vec, vec } from "./math"
-import { type Lens, Light } from "./type"
+import { type Lens, type LensGroup, Light } from "./type"
 
 //================================
 // States
@@ -52,16 +52,18 @@ export const defaultConcaveLens = (x: number) => {
     return { x1: x - 2, x2: x + 2, R1: -R, R2: R, r: 10, n: 1.5, aperture: 1, selected: false }
 }
 
-export const items0 = (): Lens[] => {
+export const lensGroups0 = (): LensGroup[] => {
     return [
-        defaultConvexLens(0),
+        { lenses: [defaultConvexLens(0)] }
     ]
 }
-export const items = ref(items0())
+export const lensGroups = ref(lensGroups0())
 
 export const releaseAllLenses = () => {
-    for (let i = 0; i < items.value.length; i++) {
-        items.value[i].selected = false
+    for (let i = 0; i < lensGroups.value.length; i++) {
+        for (let j = 0; j < lensGroups.value[i].lenses.length; j++) {
+            lensGroups.value[i].lenses[j].selected = false
+        }
     }
 }
 
@@ -222,17 +224,21 @@ export const infR = computed(() => {
 
 export const minLensX = computed(() => {
     let minX = infR.value
-    for (const lens of items.value) {
-        const left = Math.min(lens.x1, lens.x1)
-        minX = Math.min(minX, left)
+    for (const lensGroup of lensGroups.value) {
+        for (const lens of lensGroup.lenses) {
+            const left = Math.min(lens.x1, lens.x1)
+            minX = Math.min(minX, left)
+        }
     }
     return minX
 })
 
 export const maxLensX = computed(() => {
     let maxX = -infR.value
-    for (const lens of items.value) {
-        maxX = Math.max(maxX, lens.x2)
+    for (const lensGroup of lensGroups.value) {
+        for (const lens of lensGroup.lenses) {
+            maxX = Math.max(maxX, lens.x2)
+        }
     }
     return maxX
 })
diff --git a/src/type.ts b/src/type.ts
index 070eca7..351c1c3 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -13,4 +13,8 @@ export type Lens = {
     n: number,
     aperture: number,
     selected: boolean,
+}
+
+export type LensGroup = {
+    lenses: Lens[],
 }
\ No newline at end of file

From b35077ea972c22785e685f49fd22d1cbb7ed7245 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Wed, 26 Jun 2024 15:02:53 +0900
Subject: [PATCH 23/53] Better lens UI

---
 src/SVG/Lens.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index fb10e7b..9c3ef39 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -293,8 +293,6 @@ const apertureSizeChangeStartHandler = (e: any) => {
 
         <!-- Lens -->
         <g class="hover-parent">
-            <!-- dummy for ui -->
-            <path :d="path" class='transparent grab' @mousedown="moveStartHandler" />
             <!-- Background -->
             <g class="hover-child-bg fill-none">
                 <!-- left -->
@@ -377,5 +375,8 @@ const apertureSizeChangeStartHandler = (e: any) => {
             <circle :cx="xm" :cy="r * lens.aperture" :r="rUI" @mousedown="apertureSizeChangeStartHandler"
                 class="ui-hidden vertical-resize"></circle>
         </g>
+
+        <!-- dummy for ui -->
+        <path :d="path" class='transparent grab' @mousedown="moveStartHandler" />
     </g>
 </template>
\ No newline at end of file

From 098dde50557610ca336e9c828b2c6dbefbce051b Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Wed, 26 Jun 2024 15:11:14 +0900
Subject: [PATCH 24/53] Lens group move

---
 src/Controller.vue    |  4 ++--
 src/SVG/Lens.vue      | 42 +-----------------------------------------
 src/SVG/LensGroup.vue | 36 +++++++++++++++++++++++++++++++++++-
 src/globals.ts        |  8 +++-----
 src/type.ts           |  2 +-
 5 files changed, 42 insertions(+), 50 deletions(-)

diff --git a/src/Controller.vue b/src/Controller.vue
index c888786..b0d9db9 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -90,8 +90,8 @@ const nRays = computed(() => {
                 </tr>
                 <tr>
                     <td>
-                        <button @click="lensGroups.push({ lenses: [defaultConvexLens(0)] })">Add convex lens</button>
-                        <button @click="lensGroups.push({ lenses: [defaultConcaveLens(0)] })">Add concave lens</button>
+                        <button @click="lensGroups.push({ lenses: [defaultConvexLens(0)], selected: false })">Add convex lens</button>
+                        <button @click="lensGroups.push({ lenses: [defaultConcaveLens(0)], selected: false })">Add concave lens</button>
                     </td>
                 </tr>
                 <!-- <tr>
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 9c3ef39..248a5a8 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -81,46 +81,6 @@ const path2 = computed(() => {
     return `M ${rightX.value} ${-r.value} A ${absR2} ${absR2} 0 0 ${sweep} ${rightX.value} ${r.value}`
 })
 
-const moveStartHandler = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    const lens = props.lens
-    // Selection
-    if (!e.shiftKey && !props.lens.selected) {
-        releaseAllLenses()
-    }
-    lens.selected = true
-
-    const m0 = getPositionOnSvg(e);
-    const x10s = lensGroups.value.map((lensGroup) => lensGroup.lenses.map((lens) => lens.x1))
-    const x20s = lensGroups.value.map((lensGroup) => lensGroup.lenses.map((lens) => lens.x2))
-    setMoveHandler((e_: any) => {
-        const d = getPositionDiffOnSvgApp(e_, m0)
-        // Fix d.x within maxLightX < d.x < sensor.x
-        for (let i = 0; i < lensGroups.value.length; i++) {
-            for (let j = 0; j < lensGroups.value[i].lenses.length; j++) {
-                if (x10s[i][j] + d.x < maxLightX.value) {
-                    if (Math.abs(maxLightX.value - x10s[i][j]) < Math.abs(d.x)) {
-                        d.x = maxLightX.value - x10s[i][j]
-                    }
-                } else if (x20s[i][j] + d.x > sensor.value.x) {
-                    if (Math.abs(sensor.value.x - x20s[i][j]) < Math.abs(d.x)) {
-                        d.x = sensor.value.x - x20s[i][j]
-                    }
-                }
-            }
-        }
-        // Update x1 and x2
-        lensGroups.value.forEach((lensGroup, i) => {
-            lensGroup.lenses.forEach((lens, j) => {
-                if (lens.selected) {
-                    lens.x1 = x10s[i][j] + d.x
-                    lens.x2 = x20s[i][j] + d.x
-                }
-            })
-        })
-    })
-}
-
 const x1MoveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);
@@ -377,6 +337,6 @@ const apertureSizeChangeStartHandler = (e: any) => {
         </g>
 
         <!-- dummy for ui -->
-        <path :d="path" class='transparent grab' @mousedown="moveStartHandler" />
+        <path :d="path" class='transparent grab' />
     </g>
 </template>
\ No newline at end of file
diff --git a/src/SVG/LensGroup.vue b/src/SVG/LensGroup.vue
index 497d6e2..8beb18a 100644
--- a/src/SVG/LensGroup.vue
+++ b/src/SVG/LensGroup.vue
@@ -13,6 +13,40 @@ const props = defineProps<{
     idx: number
 }>()
 
+const moveStartHandler = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const lensGroup = props.lensGroup
+    // Selection
+    if (!e.shiftKey && !props.lensGroup.selected) {
+        releaseAllLenses()
+    }
+    lensGroup.selected = true
+
+    const m0 = getPositionOnSvg(e);
+    const x10s = lensGroup.lenses.map((lens) => lens.x1)
+    const x20s = lensGroup.lenses.map((lens) => lens.x2)
+    setMoveHandler((e_: any) => {
+        const d = getPositionDiffOnSvgApp(e_, m0)
+        // Fix d.x within maxLightX < d.x < sensor.x
+        for (let i = 0; i < lensGroup.lenses.length; i++) {
+            if (x10s[i] + d.x < maxLightX.value) {
+                if (Math.abs(maxLightX.value - x10s[i]) < Math.abs(d.x)) {
+                    d.x = maxLightX.value - x10s[i]
+                }
+            } else if (x20s[i] + d.x > sensor.value.x) {
+                if (Math.abs(sensor.value.x - x20s[i]) < Math.abs(d.x)) {
+                    d.x = sensor.value.x - x20s[i]
+                }
+            }
+        }
+        // Update x1 and x2
+        lensGroup.lenses.forEach((lens, i) => {
+            lens.x1 = x10s[i] + d.x
+            lens.x2 = x20s[i] + d.x
+        })
+    })
+}
+
 const deleteLensGroup = (e: any) => {
     preventDefaultAndStopPropagation(e)
     lensGroups.value.splice(props.idx, 1)
@@ -21,7 +55,7 @@ const deleteLensGroup = (e: any) => {
 </script>
 
 <template>
-    <g v-for="(lens, idx) in lensGroup.lenses" @dblclick="deleteLensGroup">
+    <g v-for="(lens, idx) in lensGroup.lenses" @dblclick="deleteLensGroup" @mousedown="moveStartHandler">
         <Lens :lens></Lens>
     </g>
 </template>
\ No newline at end of file
diff --git a/src/globals.ts b/src/globals.ts
index 84fd95d..51fc5fa 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -54,16 +54,14 @@ export const defaultConcaveLens = (x: number) => {
 
 export const lensGroups0 = (): LensGroup[] => {
     return [
-        { lenses: [defaultConvexLens(0)] }
+        { lenses: [defaultConvexLens(0)], selected: false }
     ]
 }
 export const lensGroups = ref(lensGroups0())
 
 export const releaseAllLenses = () => {
-    for (let i = 0; i < lensGroups.value.length; i++) {
-        for (let j = 0; j < lensGroups.value[i].lenses.length; j++) {
-            lensGroups.value[i].lenses[j].selected = false
-        }
+    for (const lensGroup of lensGroups.value) {
+        lensGroup.selected = false
     }
 }
 
diff --git a/src/type.ts b/src/type.ts
index 351c1c3..b0a5900 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -12,9 +12,9 @@ export type Lens = {
     r: number,
     n: number,
     aperture: number,
-    selected: boolean,
 }
 
 export type LensGroup = {
     lenses: Lens[],
+    selected: boolean,
 }
\ No newline at end of file

From b3354295446625559c1e59fd3fda1b34d1ff7cf1 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Wed, 26 Jun 2024 15:14:03 +0900
Subject: [PATCH 25/53] Minor fix for lens UI

---
 src/SVG/Lens.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 248a5a8..7c1e801 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -318,6 +318,9 @@ const apertureSizeChangeStartHandler = (e: any) => {
             <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
         </g>
 
+        <!-- dummy for ui -->
+        <path :d="path" class='transparent grab' />
+
         <!-- Aperture -->
         <g v-if="options.aperture">
             <!-- Lines -->
@@ -335,8 +338,5 @@ const apertureSizeChangeStartHandler = (e: any) => {
             <circle :cx="xm" :cy="r * lens.aperture" :r="rUI" @mousedown="apertureSizeChangeStartHandler"
                 class="ui-hidden vertical-resize"></circle>
         </g>
-
-        <!-- dummy for ui -->
-        <path :d="path" class='transparent grab' />
     </g>
 </template>
\ No newline at end of file

From 82e30b0f61da2fd3db92fb3e2a6507cd08f95657 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Wed, 26 Jun 2024 18:12:35 +0900
Subject: [PATCH 26/53] Style refactoring

---
 src/Controller.vue         |   6 +-
 src/SVG/Guideline.vue      | 105 ++++++++++++++-------------------
 src/SVG/Lens.vue           |  74 +++++++++++------------
 src/SVG/LightParallel.vue  |  11 +++-
 src/SVG/SVG.vue            | 116 ++++++++++++-------------------------
 src/SVG/WithBackground.vue |   8 +++
 6 files changed, 132 insertions(+), 188 deletions(-)
 create mode 100644 src/SVG/WithBackground.vue

diff --git a/src/Controller.vue b/src/Controller.vue
index b0d9db9..e22d35b 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -80,11 +80,11 @@ const nRays = computed(() => {
         </tr> -->
         <template v-if="options.lens">
             <template v-if="options.advanced">
-                <!-- <tr>
+                <tr>
                     <td><label><input type="checkbox" v-model="options.curvature"> Curvature</label></td>
                     <td></td>
-                    <td>{{ humanReadable(lensR) }}</td>
-                </tr> -->
+                    <!-- <td>{{ humanReadable(lensR) }}</td> -->
+                </tr>
                 <tr>
                     <td><label><input type="checkbox" v-model="options.lensIdeal"> Ideal lens</label></td>
                 </tr>
diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index 6b73ef3..1838e1d 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -4,6 +4,8 @@ import { lensGroups, sensor, options, infR } from '../globals'
 
 import { vec, fGaussian, calcLensF } from '../math'
 
+import WithBackground from './WithBackground.vue'
+
 const lens = computed(() => {
     return lensGroups.value[0].lenses[0]
 })
@@ -92,66 +94,47 @@ const dof = computed(() => {
 </script>
 
 <template>
-    <!-- Inside camera -->
-    <line :x1="sensor.x" :y1="sensor.r" :x2="x" :y2="re" class="dotted-bg"></line>
-    <line :x1="sensor.x" :y1="-sensor.r" :x2="x" :y2="-re" class="dotted-bg"></line>
-    <line :x1="sensor.x" :y1="sensor.r" :x2="x" :y2="re" class="dotted"></line>
-    <line :x1="sensor.x" :y1="-sensor.r" :x2="x" :y2="-re" class="dotted"></line>
-    <g v-if="x !== sensor.x">
-        <!-- Lens to focal plane (outer) -->
-        <line :x1="x" :y1="-re" :x2="x + aov.middleOuter.x" :y2="-re + aov.middleOuter.y" class="dotted-bg">
-        </line>
-        <line :x1="x" :y1="re" :x2="x + aov.middleOuter.x" :y2="re - aov.middleOuter.y" class="dotted-bg">
-        </line>
-        <line :x1="x" :y1="-re" :x2="x + aov.middleOuter.x" :y2="-re + aov.middleOuter.y" class="dotted">
-        </line>
-        <line :x1="x" :y1="re" :x2="x + aov.middleOuter.x" :y2="re - aov.middleOuter.y" class="dotted"></line>
-        <!-- Lens to focal plane (inner) -->
-        <line :x1="x" :y1="-re" :x2="x + aov.middleInner.x" :y2="-re + aov.middleInner.y" class="dotted-thick-bg">
-        </line>
-        <line :x1="x" :y1="re" :x2="x + aov.middleInner.x" :y2="re - aov.middleInner.y" class="dotted-thick-bg">
-        </line>
-        <line :x1="x" :y1="-re" :x2="x + aov.middleInner.x" :y2="-re + aov.middleInner.y" class="dotted-thick">
-        </line>
-        <line :x1="x" :y1="re" :x2="x + aov.middleInner.x" :y2="re - aov.middleInner.y" class="dotted-thick">
-        </line>
-    </g>
-    <!-- Non over infinity -->
-    <g v-if="x + f < sensor.x">
-        <!-- Focal plane -->
-        <line :x1="focal.x" :y1="-focal.d" :x2="focal.x" :y2="focal.d" class="dotted-bg"></line>
-        <line :x1="focal.x" :y1="-focal.d" :x2="focal.x" :y2="focal.d" class="dotted"></line>
-        <!-- Focal plane to inf (outer) -->
-        <line :x1="focal.x" :y1="focal.d" :x2="focal.x + aov.outer.x" :y2="focal.d + aov.outer.y" class="dotted-bg">
-        </line>
-        <line :x1="focal.x" :y1="-focal.d" :x2="focal.x + aov.outer.x" :y2="-focal.d - aov.outer.y" class="dotted-bg">
-        </line>
-        <line :x1="focal.x" :y1="focal.d" :x2="focal.x + aov.outer.x" :y2="focal.d + aov.outer.y" class="dotted"></line>
-        <line :x1="focal.x" :y1="-focal.d" :x2="focal.x + aov.outer.x" :y2="-focal.d - aov.outer.y" class="dotted">
-        </line>
-        <!-- Focal plane to inf (inner) -->
-        <line :x1="focal.x" :y1="focal.d" :x2="focal.x + aov.inner.x" :y2="focal.d - aov.inner.y"
-            class="dotted-thick-bg">
-        </line>
-        <line :x1="focal.x" :y1="-focal.d" :x2="focal.x + aov.inner.x" :y2="-focal.d + aov.inner.y"
-            class="dotted-thick-bg"></line>
-        <line :x1="focal.x" :y1="focal.d" :x2="focal.x + aov.inner.x" :y2="focal.d - aov.inner.y" class="dotted-thick">
-        </line>
-        <line :x1="focal.x" :y1="-focal.d" :x2="focal.x + aov.inner.x" :y2="-focal.d + aov.inner.y"
-            class="dotted-thick">
-        </line>
-
-        <!-- Depth of field -->
-        <g v-if="options.circleOfConfusion && options.depthOfField">
-            <line :x1="x - dof.inner.x" :y1="-dof.inner.d" :x2="x - dof.inner.x" :y2="dof.inner.d"
-                class="dotted-thick-bg"></line>
-            <line :x1="x - dof.outer.x" :y1="-dof.outer.d" :x2="x - dof.outer.x" :y2="dof.outer.d"
-                class="dotted-thick-bg"></line>
-            <line :x1="x - dof.inner.x" :y1="-dof.inner.d" :x2="x - dof.inner.x" :y2="dof.inner.d" class="dotted-thick">
-            </line>
-            <line :x1="x - dof.outer.x" :y1="-dof.outer.d" :x2="x - dof.outer.x" :y2="dof.outer.d" class="dotted-thick">
-            </line>
+    <WithBackground>
+        <g class="stroke-white">
+            <!-- Inside camera -->
+            <g class="thick">
+                <line :x1="sensor.x" :y1="sensor.r" :x2="x" :y2="re"></line>
+                <line :x1="sensor.x" :y1="-sensor.r" :x2="x" :y2="-re"></line>
+            </g>
+            <g v-if="x !== sensor.x">
+                <!-- Lens to focal plane (outer) -->
+                <g class="thick">
+                    <line :x1="x" :y1="-re" :x2="x + aov.middleOuter.x" :y2="-re + aov.middleOuter.y"></line>
+                    <line :x1="x" :y1="re" :x2="x + aov.middleOuter.x" :y2="re - aov.middleOuter.y"></line>
+                </g>
+                <!-- Lens to focal plane (inner) -->
+                <g class="thicker">
+                    <line :x1="x" :y1="-re" :x2="x + aov.middleInner.x" :y2="-re + aov.middleInner.y"></line>
+                    <line :x1="x" :y1="re" :x2="x + aov.middleInner.x" :y2="re - aov.middleInner.y"></line>
+                </g>
+            </g>
+            <!-- Non over infinity -->
+            <g v-if="x + f < sensor.x">
+                <!-- Focal plane -->
+                <line :x1="focal.x" :y1="-focal.d" :x2="focal.x" :y2="focal.d" class="thick"></line>
+                <!-- Focal plane to inf (outer) -->
+                <g class="thick">
+                    <line :x1="focal.x" :y1="focal.d" :x2="focal.x + aov.outer.x" :y2="focal.d + aov.outer.y"></line>
+                    <line :x1="focal.x" :y1="-focal.d" :x2="focal.x + aov.outer.x" :y2="-focal.d - aov.outer.y"></line>
+                </g>
+                <!-- Focal plane to inf (inner) -->
+                <g class="thicker">
+                    <line :x1="focal.x" :y1="focal.d" :x2="focal.x + aov.inner.x" :y2="focal.d - aov.inner.y"></line>
+                    <line :x1="focal.x" :y1="-focal.d" :x2="focal.x + aov.inner.x" :y2="-focal.d + aov.inner.y"></line>
+                </g>
+                <!-- Depth of field -->
+                <g v-if="options.circleOfConfusion && options.depthOfField">
+                    <g class="thick">
+                        <line :x1="x - dof.inner.x" :y1="-dof.inner.d" :x2="x - dof.inner.x" :y2="dof.inner.d"></line>
+                        <line :x1="x - dof.outer.x" :y1="-dof.outer.d" :x2="x - dof.outer.x" :y2="dof.outer.d"></line>
+                    </g>
+                </g>
+            </g>
         </g>
-
-    </g>
+    </WithBackground>
 </template>
\ No newline at end of file
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 7c1e801..7719bf9 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -4,6 +4,7 @@ import { lensGroups, releaseAllLenses, sensor, options, style, rUI, maxLightX }
 import { calcLensF, calcRMax } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import type { Lens } from '../type'
+import WithBackground from './WithBackground.vue'
 
 // const props = defineProps(['lens', 'idx'])
 const props = defineProps<{
@@ -14,6 +15,10 @@ const f = computed(() => {
     return calcLensF(props.lens)
 })
 
+const H = computed(() => {
+    return xm.value - f.value - f.value * f.value / (sensor.value.circleOfConfusion * fNumber.value)
+})
+
 const xm = computed(() => {
     return (props.lens.x1 + props.lens.x2) / 2
 })
@@ -235,26 +240,33 @@ const apertureSizeChangeStartHandler = (e: any) => {
     <g>
         <!-- Curvature circle -->
         <g v-if="options.lens && options.curvature">
-            <circle :cx="lens.x1 + lens.R1" :cy="0" :r="Math.abs(lens.R1)" class="dotted"></circle>
-            <circle :cx="lens.x2 + lens.R2" :cy="0" :r="Math.abs(lens.R2)" class="dotted"></circle>
+            <!-- Circle -->
+            <WithBackground>
+                <g class="stroke-white thicker fill-none">
+                    <circle :cx="lens.x1 + lens.R1" :cy="0" :r="Math.abs(lens.R1)"></circle>
+                    <circle :cx="lens.x2 + lens.R2" :cy="0" :r="Math.abs(lens.R2)"></circle>
+                </g>
+            </WithBackground>
             <!-- center point -->
-            <circle :cx="lens.x1 + lens.R1" cy="0" :r="rUI / 2" class="white"></circle>
-            <circle :cx="lens.x2 + lens.R2" cy="0" :r="rUI / 2" class="white"></circle>
+            <!-- bg -->
+            <circle :cx="lens.x1 + lens.R1" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
+            <circle :cx="lens.x2 + lens.R2" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
+            <!-- fg -->
+            <circle :cx="lens.x1 + lens.R1" cy="0" :r="rUI / 2" class="fill-white"></circle>
+            <circle :cx="lens.x2 + lens.R2" cy="0" :r="rUI / 2" class="fill-white"></circle>
         </g>
 
         <!-- Hyperfocal point -->
         <g
             v-if="options.lens && options.sensor && options.circleOfConfusion && options.angleOfView && options.depthOfField && options.hyperfocalPoint">
-            <circle :cx="xm - f - f * f / (sensor.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2 * 1.2"
-                :fill="style.lineBgColor"></circle>
-            <circle :cx="xm - f - f * f / (sensor.circleOfConfusion * fNumber)" cy="0" :r="rUI / 2" class="white">
+            <circle :cx="H" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
+            <circle :cx="H" cy=" 0" :r="rUI / 2" class="fill-white">
             </circle>
         </g>
 
         <!-- Lens -->
-        <g class="hover-parent">
-            <!-- Background -->
-            <g class="hover-child-bg fill-none">
+        <WithBackground>
+            <g class="stroke-white normal fill-none">
                 <!-- left -->
                 <path :d="path1" />
                 <!-- right -->
@@ -264,18 +276,7 @@ const apertureSizeChangeStartHandler = (e: any) => {
                 <!-- Bottom -->
                 <line :x1="leftX" :y1="r" :x2="rightX" :y2="r"></line>
             </g>
-            <!-- Foreground -->
-            <g class="hover-child fill-none">
-                <!-- left -->
-                <path :d="path1" />
-                <!-- right -->
-                <path :d="path2" />
-                <!-- Top -->
-                <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
-                <!-- Bottom -->
-                <line :x1="leftX" :y1="r" :x2="rightX" :y2="r"></line>
-            </g>
-        </g>
+        </WithBackground>
 
         <!-- Thickness change UI -->
         <g class="ui-stroke transparent horizontal-resize">
@@ -294,16 +295,11 @@ const apertureSizeChangeStartHandler = (e: any) => {
         <!-- Focal points -->
         <g v-if="options.lensFocalPoints">
             <!-- left hand -->
-            <g>
-                <circle :cx="xm - f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-                <circle :cx="xm - f" cy="0" :r="rUI / 2" class="white"></circle>
-                <!-- UI -->
-                <!-- <circle :cx="xm - f" cy="0" :r="rUI" @mousedown="focalPointMoveStartHandler" class="ui-hidden">
-                </circle> -->
-            </g>
+            <circle :cx="xm - f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
+            <circle :cx="xm - f" cy="0" :r="rUI / 2" class="fill-white"></circle>
             <!-- right hand -->
             <circle :cx="xm + f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-            <circle :cx="xm + f" cy="0" :r="rUI / 2" class="white"></circle>
+            <circle :cx="xm + f" cy="0" :r="rUI / 2" class="fill-white"></circle>
 
             <!-- Double focal points -->
             <g v-if="options.lensDoubleFocalPoints">
@@ -323,17 +319,13 @@ const apertureSizeChangeStartHandler = (e: any) => {
 
         <!-- Aperture -->
         <g v-if="options.aperture">
-            <!-- Lines -->
-            <!-- Background -->
-            <g class="hover-sibling-bg no-pointer-events">
-                <line :x1="xm" :y1="-r" :x2="xm" :y2="-r * lens.aperture"></line>
-                <line :x1="xm" :y1="r" :x2="xm" :y2="r * lens.aperture"></line>
-            </g>
-            <!-- Foreground -->
-            <g class="hover-sibling no-pointer-events">
-                <line :x1="xm" :y1="-r" :x2="xm" :y2="-r * lens.aperture"></line>
-                <line :x1="xm" :y1="r" :x2="xm" :y2="r * lens.aperture"></line>
-            </g>
+            <WithBackground>
+                <!-- Lines -->
+                <g class="stroke-white normal no-pointer-events">
+                    <line :x1="xm" :y1="-r" :x2="xm" :y2="-r * lens.aperture"></line>
+                    <line :x1="xm" :y1="r" :x2="xm" :y2="r * lens.aperture"></line>
+                </g>
+            </WithBackground>
             <!-- UI -->
             <circle :cx="xm" :cy="r * lens.aperture" :r="rUI" @mousedown="apertureSizeChangeStartHandler"
                 class="ui-hidden vertical-resize"></circle>
diff --git a/src/SVG/LightParallel.vue b/src/SVG/LightParallel.vue
index bdcb47b..b4f9e29 100644
--- a/src/SVG/LightParallel.vue
+++ b/src/SVG/LightParallel.vue
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue'
 import { state, infR, rUI } from '../globals'
 import { vec, Vec } from '../math'
 import * as h from '../handlers'
+import WithBackground from './WithBackground.vue';
 
 const props = defineProps(['light', 'idx'])
 
@@ -26,9 +27,13 @@ const points = computed(() => {
 
 <template>
     <g>
-        <polygon :points :fill="`hsl(${light.color}, 100%, 50%, 0.5)`"></polygon>
-        <polygon :points class="ui-bg"></polygon>
-        <polygon :points class="ui" @mousedown="h.lightMoveStartHandler($event, idx)" @dblclick="h.deleteLight($event, idx)"></polygon>
+        <!-- <polygon :points class="ui-bg"></polygon> -->
+        <g @mousedown="h.lightMoveStartHandler($event, idx)" @dblclick="h.deleteLight($event, idx)">
+            <polygon :points :fill="`hsl(${light.color}, 100%, 50%, 0.5)`"></polygon>
+            <WithBackground>
+                <polygon :points class="stroke-white normal fill-none"></polygon>
+            </WithBackground>
+        </g>
 
         <circle :cx="light.s.x" :cy="light.s.y" :r="rUI"
             @mousedown="h.parallelLightNodeMoveStartHandler($event, idx, 's')" class="ui-hidden"></circle>
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 93a46c5..ca02051 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -9,6 +9,7 @@ import Grid from './Grid.vue'
 import Guideline from './Guideline.vue'
 import LightParallel from './LightParallel.vue'
 import LensGroup from './LensGroup.vue'
+import WithBackground from './WithBackground.vue'
 
 // Reference to the svg element
 // This is needed for handles in handlers.ts
@@ -70,7 +71,7 @@ const strokeDashArray = computed(() => {
     <!-- Items -->
     <g v-if="options.lens">
       <g v-for="(lensGroup, idx) in lensGroups">
-          <LensGroup :lensGroup :idx></LensGroup>
+        <LensGroup :lensGroup :idx></LensGroup>
       </g>
     </g>
 
@@ -86,11 +87,12 @@ const strokeDashArray = computed(() => {
     <!-- Lights -->
     <g v-for="(light, idx) of lights">
       <g v-if="light.type === Light.Point">
-        <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" :fill="`hsl(${light.color}, 100%, 50%, 0.5)`"></circle>
-        <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" class="ui-bg"></circle>
-        <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" @dblclick="h.deleteLight($event, idx)"
-          @mousedown="h.lightMoveStartHandler($event, idx)" class="ui grab">
-        </circle>
+        <g @mousedown="h.lightMoveStartHandler($event, idx)" @dblclick="h.deleteLight($event, idx)" class="grab">
+          <WithBackground>
+            <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" class="stroke-white normal fill-none"></circle>
+          </WithBackground>
+          <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" :fill="`hsl(${light.color}, 100%, 50%, 0.5)`"></circle>
+        </g>
       </g>
       <g v-if="light.type === Light.Parallel">
         <LightParallel :light :idx class="grab"></LightParallel>
@@ -99,14 +101,12 @@ const strokeDashArray = computed(() => {
 
     <!-- Sensor -->
     <g v-if="options.sensor">
-      <g class="hover-parent">
-        <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="hover-child-bg" />
-        <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="hover-child" />
-        <!-- dummy for ui -->
-        <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="ui-stroke transparent grab"
-          @mousedown="h.sensorMoveStartHandler" />
-      </g>
-
+      <WithBackground>
+        <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="stroke-white normal" />
+      </WithBackground>
+      <!-- dummies for ui -->
+      <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="ui-stroke transparent grab"
+        @mousedown="h.sensorMoveStartHandler" />
       <circle :cx="sensor.x" :cy="-sensor.r" :r="rUI" class="transparent vertical-resize"
         @mousedown="h.sensorSizeChangeStartHandler">
       </circle>
@@ -120,16 +120,6 @@ svg {
   display: block;
 }
 
-.hover-child {
-  stroke: white;
-  stroke-width: v-bind('strokeWidth.normal');
-}
-
-.hover-child-bg {
-  stroke: v-bind('style.lineBgColor');
-  stroke-width: v-bind('strokeWidth.normalBg');
-}
-
 .fill-none {
   fill: none;
 }
@@ -138,30 +128,6 @@ svg {
   pointer-events: none;
 }
 
-.hover-sibling {
-  stroke: white;
-  stroke-width: v-bind('strokeWidth.normal');
-}
-
-.hover-sibling-bg {
-  stroke: v-bind('style.lineBgColor');
-  stroke-width: v-bind('strokeWidth.normalBg');
-}
-
-.hover-sibling-master:hover~.hover-sibling,
-.hover-parent:hover .hover-child,
-.hover-parent:hover .hidden-hover-child {
-  stroke: white;
-  stroke-width: v-bind('strokeWidth.bold');
-}
-
-.hover-sibling-master:hover~.hover-sibling-bg,
-.hover-parent:hover .hover-child-bg,
-.hover-parent:hover .hidden-hover-child-bg {
-  stroke: v-bind('style.lineBgColor');
-  stroke-width: v-bind('strokeWidth.boldBg');
-}
-
 .ui {
   stroke: white;
   stroke-width: v-bind('strokeWidth.normal');
@@ -174,7 +140,6 @@ svg {
   fill: transparent
 }
 
-.ui-transparent,
 .ui-hidden {
   stroke: none;
   fill: transparent;
@@ -186,22 +151,23 @@ svg {
   stroke-width: v-bind('strokeWidth.bold');
 }
 
-.white {
+.fill-white {
   fill: white;
 }
 
-.thicker {
+.stroke-white {
   stroke: white;
+}
+
+.thicker {
   stroke-width: v-bind('strokeWidth.thicker');
 }
 
 .thick {
-  stroke: white;
   stroke-width: v-bind('strokeWidth.thick');
 }
 
 .normal {
-  stroke: white;
   stroke-width: v-bind('strokeWidth.normal');
 }
 
@@ -209,36 +175,26 @@ svg {
   stroke-width: v-bind('strokeWidth.bold');
 }
 
-.dotted {
-  stroke: white;
-  /* dasharray is disabled for performance issue when close-up */
-  /* stroke-dasharray: v-bind(strokeDashArray); */
-  stroke-width: v-bind('strokeWidth.thick');
-  fill: none;
-}
+.background {
+  .stroke-white {
+    stroke: v-bind('style.lineBgColor');
+  }
 
-.dotted-thick {
-  stroke: white;
-  /* dasharray is disabled for performance issue when close-up */
-  /* stroke-dasharray: v-bind(strokeDashArray); */
-  stroke-width: v-bind('strokeWidth.thicker');
-  fill: none;
-}
+  .thicker {
+    stroke-width: v-bind('strokeWidth.thickerBg');
+  }
 
-.dotted-bg {
-  stroke: v-bind('style.lineBgColor');
-  /* dasharray is disabled for performance issue when close-up */
-  /* stroke-dasharray: v-bind(strokeDashArray); */
-  stroke-width: v-bind('strokeWidth.thickBg');
-  fill: none;
-}
+  .thick {
+    stroke-width: v-bind('strokeWidth.thickBg');
+  }
 
-.dotted-thick-bg {
-  stroke: v-bind('style.lineBgColor');
-  /* dasharray is disabled for performance issue when close-up */
-  /* stroke-dasharray: v-bind(strokeDashArray); */
-  stroke-width: v-bind('strokeWidth.thickerBg');
-  fill: none;
+  .normal {
+    stroke-width: v-bind('strokeWidth.normalBg');
+  }
+
+  .bold {
+    stroke-width: v-bind('strokeWidth.boldBg');
+  }
 }
 
 .transparent {
diff --git a/src/SVG/WithBackground.vue b/src/SVG/WithBackground.vue
new file mode 100644
index 0000000..76de2c0
--- /dev/null
+++ b/src/SVG/WithBackground.vue
@@ -0,0 +1,8 @@
+<template>
+    <g class="background">
+        <slot></slot>
+    </g>
+    <g class="foreground">
+        <slot></slot>
+    </g>
+</template>
\ No newline at end of file

From e257f3afdc01e139209d8960d6f2eda45790096f Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Wed, 26 Jun 2024 18:59:19 +0900
Subject: [PATCH 27/53] Some refactoring

---
 src/SVG/LightParallel.vue | 33 ++++++++++++++++++++++++++++++---
 src/SVG/SVG.vue           |  5 +++--
 src/handlers.ts           | 25 -------------------------
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/SVG/LightParallel.vue b/src/SVG/LightParallel.vue
index b4f9e29..4e00eca 100644
--- a/src/SVG/LightParallel.vue
+++ b/src/SVG/LightParallel.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { state, infR, rUI } from '../globals'
+import { state, lights, infR, rUI, minLensX } from '../globals'
 import { vec, Vec } from '../math'
 import * as h from '../handlers'
 import WithBackground from './WithBackground.vue';
+import {Light} from '../type'
 
 const props = defineProps(['light', 'idx'])
 
@@ -23,6 +24,32 @@ const points = computed(() => {
     return `${p1.x},${p1.y} ${p2.x},${p2.y} ${p3.x},${p3.y} ${p4.x},${p4.y}`
 })
 
+const parallelLightNodeMoveStartHandler = (e: any, idx: number, node: Vec) => {
+    h.preventDefaultAndStopPropagation(e)
+    // Last touched light is always front
+    const light = lights.value[idx];
+    const newLights = lights.value.filter((light, i) => {
+        return i !== idx
+    })
+    newLights.push(light)
+    lights.value = newLights
+
+    if (light.type === Light.Parallel) {
+        const m0 = h.getPositionOnSvg(e);
+        const p0 = node.copy()
+        const p = node
+        h.setMoveHandler((e_: any) => {
+            const d = h.getPositionDiffOnSvgApp(e_, m0)
+            if (p0.x + d.x > minLensX.value) {
+                p.x = minLensX.value
+            } else {
+                p.x = p0.x + d.x
+            }
+            p.y = p0.y + d.y
+        })
+    }
+}
+
 </script>
 
 <template>
@@ -36,8 +63,8 @@ const points = computed(() => {
         </g>
 
         <circle :cx="light.s.x" :cy="light.s.y" :r="rUI"
-            @mousedown="h.parallelLightNodeMoveStartHandler($event, idx, 's')" class="ui-hidden"></circle>
+            @mousedown="parallelLightNodeMoveStartHandler($event, idx, light.s)" class="ui-hidden"></circle>
         <circle :cx="light.t.x" :cy="light.t.y" :r="rUI"
-            @mousedown="h.parallelLightNodeMoveStartHandler($event, idx, 't')" class="ui-hidden"></circle>
+            @mousedown="parallelLightNodeMoveStartHandler($event, idx, light.t)" class="ui-hidden"></circle>
     </g>
 </template>
\ No newline at end of file
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index ca02051..f1e0f26 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -78,9 +78,10 @@ const strokeDashArray = computed(() => {
     <!-- Apple -->
     <g v-if="options.apple">
       <g v-for="(light, idx) of apple">
+        <WithBackground>
+          <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" class="stroke-white normal fill-none"></circle>
+        </WithBackground>
         <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" :fill="`hsl(${light.color}, 100%, 50%, 0.5)`"></circle>
-        <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" class="ui-bg"></circle>
-        <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" class="ui"></circle>
       </g>
     </g>
 
diff --git a/src/handlers.ts b/src/handlers.ts
index d763ac0..76de105 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -119,31 +119,6 @@ export const lightMoveStartHandler = (e: any, idx: number) => {
         }
     }
 }
-export const parallelLightNodeMoveStartHandler = (e: any, idx: number, which: string) => {
-    preventDefaultAndStopPropagation(e)
-    // Last touched light is always front
-    const light = lights.value[idx];
-    const newLights = lights.value.filter((light, i) => {
-        return i !== idx
-    })
-    newLights.push(light)
-    lights.value = newLights
-
-    if (light.type === Light.Parallel) {
-        const m0 = getPositionOnSvg(e);
-        const p0 = which === "s" ? light.s.copy() : light.t.copy()
-        const p = which === "s" ? light.s : light.t
-        moveHandler = (e_: any) => {
-            const d = getPositionDiffOnSvgApp(e_, m0)
-            if (p0.x + d.x > minLensX.value) {
-                p.x = minLensX.value
-            } else {
-                p.x = p0.x + d.x
-            }
-            p.y = p0.y + d.y
-        }
-    }
-}
 export const sensorMoveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m0 = getPositionOnSvg(e);

From 34f4755564bc3777322984914130523fcc2ab276 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Wed, 26 Jun 2024 22:19:33 +0900
Subject: [PATCH 28/53] Point and optimization

---
 src/Canvas.vue   | 27 +++++++++++++++++++--------
 src/SVG/Lens.vue | 47 ++++++++++++++++++++++-------------------------
 src/SVG/SVG.vue  |  4 ++++
 3 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 2cb411a..4446c48 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, onMounted, ref } from 'vue'
+import { watch, onMounted, ref, computed } from 'vue'
 
 import { state, lights, lensGroups, sensor, sensorData, apple, options, style, infR } from './globals'
 import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS, calcRMax } from './math'
@@ -27,17 +27,28 @@ const drawSegment = (p: Vec, v: Vec, length: number) => {
   return q
 };
 
-const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
+const lenses = computed(() => {
+  const res = lensGroups.value.reduce((acc: Lens[], cur: LensGroup) => { return acc.concat(cur.lenses) }, [])
+  res.sort((a, b) => { return a.x1 - b.x1 })
+  return res
+})
+
+const fs = computed(() => {
+  return lenses.value.map((lens) => calcLensF(lens))
+})
 
+const rMaxes = computed(() => {
+  return lenses.value.map((lens) => calcRMax(lens))
+})
+
+const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
   // Multiple lens
-  // const lenses = items.value.filter(() => true)
-  const lenses = lensGroups.value.reduce((acc: Lens[], cur: LensGroup) => { return acc.concat(cur.lenses) }, [])
-  lenses.sort((a, b) => { return a.x1 - b.x1 })
-  for (const lens of lenses) {
+  for (let lensIdx = 0; lensIdx < lenses.value.length; lensIdx++) {
+    const lens = lenses.value[lensIdx]
     const s0 = s.copy()
     const xm = (lens.x1 + lens.x2) / 2
-    const f = calcLensF(lens)
-    const r = Math.min(calcRMax(lens), lens.r)
+    const f = fs.value[lensIdx]
+    const r = Math.min(rMaxes.value[lensIdx], lens.r)
     let innerLens = false
 
     // Find image position of the light source
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 7719bf9..34b8616 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -246,22 +246,20 @@ const apertureSizeChangeStartHandler = (e: any) => {
                     <circle :cx="lens.x1 + lens.R1" :cy="0" :r="Math.abs(lens.R1)"></circle>
                     <circle :cx="lens.x2 + lens.R2" :cy="0" :r="Math.abs(lens.R2)"></circle>
                 </g>
+                <!-- center point -->
+                <g class="fill-white stroke-white normal">
+                    <circle :cx="lens.x1 + lens.R1" cy="0" :r="rUI / 2"></circle>
+                    <circle :cx="lens.x2 + lens.R2" cy="0" :r="rUI / 2"></circle>
+                </g>
             </WithBackground>
-            <!-- center point -->
-            <!-- bg -->
-            <circle :cx="lens.x1 + lens.R1" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-            <circle :cx="lens.x2 + lens.R2" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-            <!-- fg -->
-            <circle :cx="lens.x1 + lens.R1" cy="0" :r="rUI / 2" class="fill-white"></circle>
-            <circle :cx="lens.x2 + lens.R2" cy="0" :r="rUI / 2" class="fill-white"></circle>
         </g>
 
         <!-- Hyperfocal point -->
         <g
             v-if="options.lens && options.sensor && options.circleOfConfusion && options.angleOfView && options.depthOfField && options.hyperfocalPoint">
-            <circle :cx="H" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-            <circle :cx="H" cy=" 0" :r="rUI / 2" class="fill-white">
-            </circle>
+            <WithBackground>
+                <circle :cx="H" cy=" 0" :r="rUI / 2" class="fill-white stroke-white normal"></circle>
+            </WithBackground>
         </g>
 
         <!-- Lens -->
@@ -286,6 +284,9 @@ const apertureSizeChangeStartHandler = (e: any) => {
             <path :d="path2" @mousedown="x2MoveStartHandler" />
         </g>
 
+        <!-- dummy for ui -->
+        <path :d="path" class='transparent grab' stroke-width="0" />
+
         <!-- Curvature change UI -->
         <g class="horizontal-resize">
             <circle class="ui-hidden" :cx="lens.x1" :cy="0" :r="rUI" @mousedown="r1MoveStartHandler"></circle>
@@ -294,18 +295,17 @@ const apertureSizeChangeStartHandler = (e: any) => {
 
         <!-- Focal points -->
         <g v-if="options.lensFocalPoints">
-            <!-- left hand -->
-            <circle :cx="xm - f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-            <circle :cx="xm - f" cy="0" :r="rUI / 2" class="fill-white"></circle>
-            <!-- right hand -->
-            <circle :cx="xm + f" cy="0" :r="rUI / 2 * 1.2" :fill="style.lineBgColor"></circle>
-            <circle :cx="xm + f" cy="0" :r="rUI / 2" class="fill-white"></circle>
-
-            <!-- Double focal points -->
-            <g v-if="options.lensDoubleFocalPoints">
-                <circle :cx="xm - 2 * f" cy="0" :r="rUI / 2" class="white"></circle>
-                <circle :cx="xm + 2 * f" cy="0" :r="rUI / 2" class="white"></circle>
-            </g>
+            <WithBackground>
+                <g class="fill-white stroke-white normal">
+                    <circle :cx="xm - f" cy="0" :r="rUI / 2"></circle>
+                    <circle :cx="xm + f" cy="0" :r="rUI / 2"></circle>
+                </g>
+                <!-- Double focal points -->
+                <g v-if="options.lensDoubleFocalPoints">
+                    <circle :cx="xm - 2 * f" cy="0" :r="rUI / 2"></circle>
+                    <circle :cx="xm + 2 * f" cy="0" :r="rUI / 2"></circle>
+                </g>
+            </WithBackground>
         </g>
 
         <!-- Lens size change UI-->
@@ -314,9 +314,6 @@ const apertureSizeChangeStartHandler = (e: any) => {
             <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
         </g>
 
-        <!-- dummy for ui -->
-        <path :d="path" class='transparent grab' />
-
         <!-- Aperture -->
         <g v-if="options.aperture">
             <WithBackground>
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index f1e0f26..5a1e02c 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -177,6 +177,10 @@ svg {
 }
 
 .background {
+  .fill-white {
+    fill: v-bind('style.lineBgColor');
+  }
+
   .stroke-white {
     stroke: v-bind('style.lineBgColor');
   }

From f615d880704c6406a5632dfe6ce307faf42c8dd0 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Wed, 26 Jun 2024 23:21:13 +0900
Subject: [PATCH 29/53] SVG refactor

---
 src/SVG/CircleUI.vue      | 23 ++++++++++++++
 src/SVG/Lens.vue          | 22 ++++++-------
 src/SVG/LightParallel.vue |  8 ++---
 src/SVG/SVG.vue           | 65 ++++++++++++++++-----------------------
 4 files changed, 64 insertions(+), 54 deletions(-)
 create mode 100644 src/SVG/CircleUI.vue

diff --git a/src/SVG/CircleUI.vue b/src/SVG/CircleUI.vue
new file mode 100644
index 0000000..101228a
--- /dev/null
+++ b/src/SVG/CircleUI.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import { Vec } from '../math'
+import { rUI } from '@/globals';
+import WithBackground from './WithBackground.vue';
+
+const props = defineProps<{
+    c: Vec,
+}>()
+
+</script>
+
+<template>
+    <g class="hover-hidden-parent">
+        <WithBackground>
+            <g class="stroke-white fill-transparent normal">
+                <g class="hover-hidden-child">
+                    <circle :cx="c.x" :cy="c.y" :r="rUI"></circle>
+                </g>
+            </g>
+        </WithBackground>
+    </g>
+</template>
\ No newline at end of file
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 34b8616..9ab0abd 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { lensGroups, releaseAllLenses, sensor, options, style, rUI, maxLightX } from '../globals'
-import { calcLensF, calcRMax } from '../math'
+import { vec, calcLensF, calcRMax } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import type { Lens } from '../type'
 import WithBackground from './WithBackground.vue'
+import CircleUI from './CircleUI.vue'
 
 // const props = defineProps(['lens', 'idx'])
 const props = defineProps<{
@@ -284,13 +285,18 @@ const apertureSizeChangeStartHandler = (e: any) => {
             <path :d="path2" @mousedown="x2MoveStartHandler" />
         </g>
 
+        <!-- Lens size change UI-->
+        <g class="ui-stroke transparent vertical-resize" @mousedown="lensSizeChangeStartHandler">
+            <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r" stroke-linecap="round"></line>
+        </g>
+
         <!-- dummy for ui -->
         <path :d="path" class='transparent grab' stroke-width="0" />
 
         <!-- Curvature change UI -->
         <g class="horizontal-resize">
-            <circle class="ui-hidden" :cx="lens.x1" :cy="0" :r="rUI" @mousedown="r1MoveStartHandler"></circle>
-            <circle class="ui-hidden" :cx="lens.x2" :cy="0" :r="rUI" @mousedown="r2MoveStartHandler"></circle>
+            <CircleUI :c="vec(lens.x1, 0)" @mousedown="r1MoveStartHandler"></CircleUI>
+            <CircleUI :c="vec(lens.x2, 0)" @mousedown="r2MoveStartHandler"></CircleUI>
         </g>
 
         <!-- Focal points -->
@@ -308,12 +314,6 @@ const apertureSizeChangeStartHandler = (e: any) => {
             </WithBackground>
         </g>
 
-        <!-- Lens size change UI-->
-        <g class="ui-stroke transparent vertical-resize" @mousedown="lensSizeChangeStartHandler">
-            <circle :cx="(leftX + rightX) / 2" :cy="-r" :r="rUI"></circle>
-            <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
-        </g>
-
         <!-- Aperture -->
         <g v-if="options.aperture">
             <WithBackground>
@@ -324,8 +324,8 @@ const apertureSizeChangeStartHandler = (e: any) => {
                 </g>
             </WithBackground>
             <!-- UI -->
-            <circle :cx="xm" :cy="r * lens.aperture" :r="rUI" @mousedown="apertureSizeChangeStartHandler"
-                class="ui-hidden vertical-resize"></circle>
+            <CircleUI :c="vec(xm, r * lens.aperture)" @mousedown="apertureSizeChangeStartHandler" class="vertical-resize">
+            </CircleUI>
         </g>
     </g>
 </template>
\ No newline at end of file
diff --git a/src/SVG/LightParallel.vue b/src/SVG/LightParallel.vue
index 4e00eca..22c6823 100644
--- a/src/SVG/LightParallel.vue
+++ b/src/SVG/LightParallel.vue
@@ -5,6 +5,7 @@ import { vec, Vec } from '../math'
 import * as h from '../handlers'
 import WithBackground from './WithBackground.vue';
 import {Light} from '../type'
+import CircleUI from './CircleUI.vue';
 
 const props = defineProps(['light', 'idx'])
 
@@ -54,7 +55,6 @@ const parallelLightNodeMoveStartHandler = (e: any, idx: number, node: Vec) => {
 
 <template>
     <g>
-        <!-- <polygon :points class="ui-bg"></polygon> -->
         <g @mousedown="h.lightMoveStartHandler($event, idx)" @dblclick="h.deleteLight($event, idx)">
             <polygon :points :fill="`hsl(${light.color}, 100%, 50%, 0.5)`"></polygon>
             <WithBackground>
@@ -62,9 +62,7 @@ const parallelLightNodeMoveStartHandler = (e: any, idx: number, node: Vec) => {
             </WithBackground>
         </g>
 
-        <circle :cx="light.s.x" :cy="light.s.y" :r="rUI"
-            @mousedown="parallelLightNodeMoveStartHandler($event, idx, light.s)" class="ui-hidden"></circle>
-        <circle :cx="light.t.x" :cy="light.t.y" :r="rUI"
-            @mousedown="parallelLightNodeMoveStartHandler($event, idx, light.t)" class="ui-hidden"></circle>
+        <CircleUI :c="light.s" @mousedown="parallelLightNodeMoveStartHandler($event, idx, light.s)"></CircleUI>
+        <CircleUI :c="light.t" @mousedown="parallelLightNodeMoveStartHandler($event, idx, light.t)"></CircleUI>
     </g>
 </template>
\ No newline at end of file
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 5a1e02c..826257f 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -4,12 +4,14 @@ import { computed, ref, onMounted } from 'vue'
 import { state, lights, lensGroups, sensor, style, apple, options, infR, rUI } from '../globals'
 import * as h from '../handlers'
 import { Light } from '../type'
+import { vec } from '../math'
 
 import Grid from './Grid.vue'
 import Guideline from './Guideline.vue'
 import LightParallel from './LightParallel.vue'
 import LensGroup from './LensGroup.vue'
 import WithBackground from './WithBackground.vue'
+import CircleUI from './CircleUI.vue'
 
 // Reference to the svg element
 // This is needed for handles in handlers.ts
@@ -59,7 +61,7 @@ const strokeDashArray = computed(() => {
 
     <!-- Optical axis -->
     <g v-if="options.opticalAxis">
-      <line :x1="-infR" y1="0" :x2="infR" y2="0" stroke="white" class="thick"></line>
+      <line :x1="-infR" y1="0" :x2="infR" y2="0" class="stroke-white thick"></line>
     </g>
 
     <!-- Grid -->
@@ -108,9 +110,8 @@ const strokeDashArray = computed(() => {
       <!-- dummies for ui -->
       <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="ui-stroke transparent grab"
         @mousedown="h.sensorMoveStartHandler" />
-      <circle :cx="sensor.x" :cy="-sensor.r" :r="rUI" class="transparent vertical-resize"
-        @mousedown="h.sensorSizeChangeStartHandler">
-      </circle>
+      <CircleUI :c="vec(sensor.x, -sensor.r)" class="vertical-resize" @mousedown="h.sensorSizeChangeStartHandler">
+      </CircleUI>
     </g>
   </svg>
 </template>
@@ -121,35 +122,39 @@ svg {
   display: block;
 }
 
-.fill-none {
-  fill: none;
-}
-
 .no-pointer-events {
   pointer-events: none;
 }
 
-.ui {
-  stroke: white;
-  stroke-width: v-bind('strokeWidth.normal');
-  fill: transparent
+.ui-stroke {
+  stroke-width: v-bind((2 * rUI));
+  pointer-events: stroke;
 }
 
-.ui-bg {
-  stroke: v-bind('style.lineBgColor');
-  stroke-width: v-bind('strokeWidth.normalBg');
-  fill: transparent
+.hover-hidden-child,
+.hover-hidden {
+  stroke: transparent;
+  fill: transparent;
 }
 
-.ui-hidden {
-  stroke: none;
+.hover-hidden-parent:hover .hover-hidden-child,
+.hover-hidden:hover {
+  stroke: inherit;
+  fill: inherit;
+}
+
+.transparent {
   fill: transparent;
+  color: transparent;
+  stroke: transparent;
 }
 
-.ui:hover,
-.ui-hidden:hover {
-  stroke: white;
-  stroke-width: v-bind('strokeWidth.bold');
+.fill-transparent {
+  fill: transparent;
+}
+
+.fill-none {
+  fill: none;
 }
 
 .fill-white {
@@ -201,20 +206,4 @@ svg {
     stroke-width: v-bind('strokeWidth.boldBg');
   }
 }
-
-.transparent {
-  fill: transparent;
-  color: transparent;
-  stroke: transparent;
-}
-
-.ui-stroke {
-  stroke-width: v-bind((2 * rUI));
-  pointer-events: stroke;
-
-  circle {
-    stroke-width: 0;
-    pointer-events: all;
-  }
-}
 </style>

From 62e3c23031fb93caa0eee4dfc38e5ba7795e9ca2 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Thu, 27 Jun 2024 00:11:32 +0900
Subject: [PATCH 30/53] Fix lensGroup selection move

---
 src/Canvas.vue        | 16 +++++-----------
 src/SVG/LensGroup.vue | 40 +++++++++++++++++++++++++---------------
 src/globals.ts        |  6 ++++++
 3 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 4446c48..bc76a52 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { watch, onMounted, ref, computed } from 'vue'
 
-import { state, lights, lensGroups, sensor, sensorData, apple, options, style, infR } from './globals'
+import { state, lights, lensGroups, sensor, sensorData, apple, options, style, infR, lensesSorted } from './globals'
 import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS, calcRMax } from './math'
 
 import { Light, type Lens, type LensGroup } from './type'
@@ -27,24 +27,18 @@ const drawSegment = (p: Vec, v: Vec, length: number) => {
   return q
 };
 
-const lenses = computed(() => {
-  const res = lensGroups.value.reduce((acc: Lens[], cur: LensGroup) => { return acc.concat(cur.lenses) }, [])
-  res.sort((a, b) => { return a.x1 - b.x1 })
-  return res
-})
-
 const fs = computed(() => {
-  return lenses.value.map((lens) => calcLensF(lens))
+  return lensesSorted.value.map((lens) => calcLensF(lens))
 })
 
 const rMaxes = computed(() => {
-  return lenses.value.map((lens) => calcRMax(lens))
+  return lensesSorted.value.map((lens) => calcRMax(lens))
 })
 
 const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
   // Multiple lens
-  for (let lensIdx = 0; lensIdx < lenses.value.length; lensIdx++) {
-    const lens = lenses.value[lensIdx]
+  for (let lensIdx = 0; lensIdx < lensesSorted.value.length; lensIdx++) {
+    const lens = lensesSorted.value[lensIdx]
     const s0 = s.copy()
     const xm = (lens.x1 + lens.x2) / 2
     const f = fs.value[lensIdx]
diff --git a/src/SVG/LensGroup.vue b/src/SVG/LensGroup.vue
index 8beb18a..3047b0b 100644
--- a/src/SVG/LensGroup.vue
+++ b/src/SVG/LensGroup.vue
@@ -15,34 +15,44 @@ const props = defineProps<{
 
 const moveStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
-    const lensGroup = props.lensGroup
     // Selection
     if (!e.shiftKey && !props.lensGroup.selected) {
         releaseAllLenses()
     }
-    lensGroup.selected = true
+    props.lensGroup.selected = true
 
     const m0 = getPositionOnSvg(e);
-    const x10s = lensGroup.lenses.map((lens) => lens.x1)
-    const x20s = lensGroup.lenses.map((lens) => lens.x2)
+    const x10s = lensGroups.value.map((lensGroup) => lensGroup.lenses.map((lens) => lens.x1))
+    const x20s = lensGroups.value.map((lensGroup) => lensGroup.lenses.map((lens) => lens.x2))
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
         // Fix d.x within maxLightX < d.x < sensor.x
-        for (let i = 0; i < lensGroup.lenses.length; i++) {
-            if (x10s[i] + d.x < maxLightX.value) {
-                if (Math.abs(maxLightX.value - x10s[i]) < Math.abs(d.x)) {
-                    d.x = maxLightX.value - x10s[i]
-                }
-            } else if (x20s[i] + d.x > sensor.value.x) {
-                if (Math.abs(sensor.value.x - x20s[i]) < Math.abs(d.x)) {
-                    d.x = sensor.value.x - x20s[i]
+        for (let i = 0; i < lensGroups.value.length; i++) {
+            const lensGroup = lensGroups.value[i];
+            if (!lensGroup.selected) {
+                continue
+            }
+            for (let j = 0; j < lensGroup.lenses.length; j++) {
+                if (x10s[i][j] + d.x < maxLightX.value) {
+                    if (Math.abs(maxLightX.value - x10s[i][j]) < Math.abs(d.x)) {
+                        d.x = maxLightX.value - x10s[i][j]
+                    }
+                } else if (x20s[i][j] + d.x > sensor.value.x) {
+                    if (Math.abs(sensor.value.x - x20s[i][j]) < Math.abs(d.x)) {
+                        d.x = sensor.value.x - x20s[i][j]
+                    }
                 }
             }
         }
         // Update x1 and x2
-        lensGroup.lenses.forEach((lens, i) => {
-            lens.x1 = x10s[i] + d.x
-            lens.x2 = x20s[i] + d.x
+        lensGroups.value.forEach((lensGroup, i) => {
+            if (!lensGroup.selected) {
+                return
+            }
+            lensGroup.lenses.forEach((lens, j) => {
+                lens.x1 = x10s[i][j] + d.x
+                lens.x2 = x20s[i][j] + d.x
+            })
         })
     })
 }
diff --git a/src/globals.ts b/src/globals.ts
index 51fc5fa..43941b3 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -59,6 +59,12 @@ export const lensGroups0 = (): LensGroup[] => {
 }
 export const lensGroups = ref(lensGroups0())
 
+export const lensesSorted = computed(() => {
+  const res = lensGroups.value.reduce((acc: Lens[], cur: LensGroup) => { return acc.concat(cur.lenses) }, [])
+  res.sort((a, b) => { return a.x1 - b.x1 })
+  return res
+})
+
 export const releaseAllLenses = () => {
     for (const lensGroup of lensGroups.value) {
         lensGroup.selected = false

From b827c0110a4f5abd6a465ef4c2f06dd84130a502 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Thu, 27 Jun 2024 00:14:33 +0900
Subject: [PATCH 31/53] Highlight selected lenses

---
 src/SVG/Lens.vue      | 9 +++++----
 src/SVG/LensGroup.vue | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 9ab0abd..a0cabcb 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -7,9 +7,9 @@ import type { Lens } from '../type'
 import WithBackground from './WithBackground.vue'
 import CircleUI from './CircleUI.vue'
 
-// const props = defineProps(['lens', 'idx'])
 const props = defineProps<{
-    lens: Lens
+    lens: Lens,
+    selected: boolean,
 }>()
 
 const f = computed(() => {
@@ -265,7 +265,7 @@ const apertureSizeChangeStartHandler = (e: any) => {
 
         <!-- Lens -->
         <WithBackground>
-            <g class="stroke-white normal fill-none">
+            <g class="stroke-white fill-none" :class="{ normal: !selected, bold: selected }">
                 <!-- left -->
                 <path :d="path1" />
                 <!-- right -->
@@ -324,7 +324,8 @@ const apertureSizeChangeStartHandler = (e: any) => {
                 </g>
             </WithBackground>
             <!-- UI -->
-            <CircleUI :c="vec(xm, r * lens.aperture)" @mousedown="apertureSizeChangeStartHandler" class="vertical-resize">
+            <CircleUI :c="vec(xm, r * lens.aperture)" @mousedown="apertureSizeChangeStartHandler"
+                class="vertical-resize">
             </CircleUI>
         </g>
     </g>
diff --git a/src/SVG/LensGroup.vue b/src/SVG/LensGroup.vue
index 3047b0b..84194cd 100644
--- a/src/SVG/LensGroup.vue
+++ b/src/SVG/LensGroup.vue
@@ -66,6 +66,6 @@ const deleteLensGroup = (e: any) => {
 
 <template>
     <g v-for="(lens, idx) in lensGroup.lenses" @dblclick="deleteLensGroup" @mousedown="moveStartHandler">
-        <Lens :lens></Lens>
+        <Lens :lens :selected="lensGroup.selected"></Lens>
     </g>
 </template>
\ No newline at end of file

From 99bd9a9f707855deff094ae82cbeb20cf4c59d72 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Thu, 27 Jun 2024 01:25:55 +0900
Subject: [PATCH 32/53] Refactoring & tiny optimization

---
 src/SVG/Lens.vue | 10 ++--------
 src/math.ts      |  6 +++---
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index a0cabcb..07d470d 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -72,6 +72,7 @@ const path = computed(() => {
     const absR2 = Math.abs(props.lens.R2)
     const sweep2 = props.lens.R2 > 0 ? 1 : 0
     d += `A ${absR2} ${absR2} 0 0 ${sweep2} ${rightX.value} ${-r.value} `
+    d += `Z`
     return d
 })
 
@@ -266,14 +267,7 @@ const apertureSizeChangeStartHandler = (e: any) => {
         <!-- Lens -->
         <WithBackground>
             <g class="stroke-white fill-none" :class="{ normal: !selected, bold: selected }">
-                <!-- left -->
-                <path :d="path1" />
-                <!-- right -->
-                <path :d="path2" />
-                <!-- Top -->
-                <line :x1="leftX" :y1="-r" :x2="rightX" :y2="-r"></line>
-                <!-- Bottom -->
-                <line :x1="leftX" :y1="r" :x2="rightX" :y2="r"></line>
+                <path :d="path"></path>
             </g>
         </WithBackground>
 
diff --git a/src/math.ts b/src/math.ts
index a5e835c..c754e85 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -169,7 +169,7 @@ const isIntersectedSS = (a1: Vec, a2: Vec, b1: Vec, b2: Vec) => {
 const intersectionLL = (a1: Vec, a2: Vec, b1: Vec, b2: Vec) => {
     const a = a2.sub(a1)
     const b = b2.sub(b1)
-    return a1.add(a.mul(cross(b, b1.sub(a1))).div(cross(b, a)))
+    return a1.add(a.mul(cross(b, b1.sub(a1))).inplaceDiv(cross(b, a)))
 }
 
 export const intersectionSS = (a1: Vec, a2: Vec, b1: Vec, b2: Vec) => {
@@ -213,9 +213,9 @@ export const intersectionCC = (c1: Vec, r1: number, c2: Vec, r2: number) => {
         r2 = rTmp
     }
     const d = c2.sub(c1).length()
-    const n = c2.sub(c1).normalize()
+    const n = c2.sub(c1).inplaceNormalize()
     const theta = Math.acos((d * d + r1 * r1 - r2 * r2) / (2.0 * d * r1));
-    return [c1.add(n.rotate(theta).mul(r1)), c1.add(n.rotate(-theta).mul(r1))]
+    return [c1.add(n.rotate(theta).inplaceMul(r1)), c1.add(n.rotate(-theta).inplaceMul(r1))]
 }
 
 //================================

From 9dd7b167073e5687304e1e3ae68cee1873cb8bbf Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Thu, 27 Jun 2024 02:52:16 +0900
Subject: [PATCH 33/53] Body mock

---
 src/Controller.vue   | 11 ++++++---
 src/SVG/Aperture.vue | 58 ++++++++++++++++++++++++++++++++++++++++++++
 src/SVG/Body.vue     | 50 ++++++++++++++++++++++++++++++++++++++
 src/SVG/Lens.vue     | 20 +++------------
 src/SVG/SVG.vue      | 10 +++++++-
 src/globals.ts       | 39 +++++++++++++++++++++++++----
 src/math.ts          | 37 ++++++++++++++++++++++++++--
 7 files changed, 197 insertions(+), 28 deletions(-)
 create mode 100644 src/SVG/Aperture.vue
 create mode 100644 src/SVG/Body.vue

diff --git a/src/Controller.vue b/src/Controller.vue
index e22d35b..1624825 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -90,8 +90,10 @@ const nRays = computed(() => {
                 </tr>
                 <tr>
                     <td>
-                        <button @click="lensGroups.push({ lenses: [defaultConvexLens(0)], selected: false })">Add convex lens</button>
-                        <button @click="lensGroups.push({ lenses: [defaultConcaveLens(0)], selected: false })">Add concave lens</button>
+                        <button @click="lensGroups.push({ lenses: [defaultConvexLens(0)], selected: false })">Add convex
+                            lens</button>
+                        <button @click="lensGroups.push({ lenses: [defaultConcaveLens(0)], selected: false })">Add
+                            concave lens</button>
                     </td>
                 </tr>
                 <!-- <tr>
@@ -164,7 +166,7 @@ const nRays = computed(() => {
             </th>
         </tr>
         <tr>
-            <td><label><input type="checkbox" v-model="options.body"> Wall</label></td>
+            <td><label><input type="checkbox" v-model="options.body"> Body</label></td>
         </tr>
         <tr v-if="options.lens && options.sensor">
             <td><label><input type="checkbox" v-model="options.angleOfView"> Guide lines</label></td>
@@ -172,6 +174,9 @@ const nRays = computed(() => {
         <tr>
             <td><label><input type="checkbox" v-model="options.advanced"> Advanced mode</label></td>
         </tr>
+        <tr>
+            <td><label><input type="checkbox" v-model="options.aperture"> Aperture</label></td>
+        </tr>
         <template v-if="options.advanced">
             <tr v-if="options.lens && options.sensor && options.circleOfConfusion">
                 <td><label><input type="checkbox" v-model="options.depthOfField"> Depth of field</label>
diff --git a/src/SVG/Aperture.vue b/src/SVG/Aperture.vue
new file mode 100644
index 0000000..519c277
--- /dev/null
+++ b/src/SVG/Aperture.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { aperture, body, maxLightX, rUI, sensor } from '@/globals';
+import WithBackground from './WithBackground.vue';
+import * as h from '../handlers'
+import CircleUI from './CircleUI.vue';
+import { vec } from '@/math';
+
+const resize = (e: any, sgn: number) => {
+    h.preventDefaultAndStopPropagation(e)
+    // Last touched light is always front
+    const m0 = h.getPositionOnSvg(e)
+    const r0 = aperture.value.r
+    h.setMoveHandler((e_: any) => {
+        const d = h.getPositionDiffOnSvgApp(e_, m0)
+        let rn = r0 + sgn * d.y
+        if (rn < 0) {
+            rn = 0
+        }
+        aperture.value.r = rn
+    })
+}
+
+const move = (e: any) => {
+    h.preventDefaultAndStopPropagation(e)
+    const m0 = h.getPositionOnSvg(e)
+    const x0 = aperture.value.x
+    h.setMoveHandler((e_: any) => {
+        const d = h.getPositionDiffOnSvgApp(e_, m0)
+        let xn = x0 + d.x
+        if (xn < maxLightX.value) {
+            xn = maxLightX.value
+        } else if (xn > sensor.value.x - rUI.value) {
+            xn = sensor.value.x - rUI.value
+        }
+        aperture.value.x = xn
+    })
+}
+
+</script>
+
+<template>
+    <WithBackground>
+        <g class="stroke-white normal">
+            <!-- Top -->
+            <line :x1="aperture.x" :y1="-body.r - 2 * rUI" :x2="aperture.x" :y2="-aperture.r"></line>
+            <!-- Bottom -->
+            <line :x1="aperture.x" :y1="body.r + 2 * rUI" :x2="aperture.x" :y2="aperture.r"></line>
+            <g class="ui-stroke transparent grab" @mousedown="move">
+                <!-- Top -->
+                <line :x1="aperture.x" :y1="-body.r - 2 * rUI" :x2="aperture.x" :y2="-aperture.r"></line>
+                <!-- Bottom -->
+                <line :x1="aperture.x" :y1="body.r + 2 * rUI" :x2="aperture.x" :y2="aperture.r"></line>
+            </g>
+            <CircleUI :c="vec(aperture.x, -aperture.r)" class="vertical-resize" @mousedown="resize($event, -1)"></CircleUI>
+            <CircleUI :c="vec(aperture.x, aperture.r)" class="vertical-resize" @mousedown="resize($event, +1)"></CircleUI>
+        </g>
+    </WithBackground>
+</template>
\ No newline at end of file
diff --git a/src/SVG/Body.vue b/src/SVG/Body.vue
new file mode 100644
index 0000000..986fa58
--- /dev/null
+++ b/src/SVG/Body.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { aperture, body, lensGroups, lensesSorted } from '@/globals';
+import WithBackground from './WithBackground.vue';
+import { computed } from 'vue';
+import { calcLensFront, calcLensR } from '@/math';
+
+// const frontR = computed(() => {
+//     if (aperture.value.x < calcLensFront(lensesSorted.value[0])){
+//         return aperture.value.r
+//     } else {
+//         return calcLensR(lensesSorted.value[0])
+//     }
+// })
+
+const lensFronts = computed(() => {
+    return lensesSorted.value.map((lens) => {
+        return calcLensFront(lens)
+    })
+})
+
+const lensRs = computed(()=>{
+    return lensesSorted.value.map((lens)=>{
+        return calcLensR(lens)
+    })
+})
+
+</script>
+
+<template>
+    <g>
+        <WithBackground>
+            <g class="stroke-white thick">
+                <!-- Outline -->
+                <line :x1="body.front" :y1="-body.r" :x2="body.back" :y2="-body.r"></line>
+                <line :x1="body.front" :y1="body.r" :x2="body.back" :y2="body.r"></line>
+                <line :x1="body.back" :y1="-body.r" :x2="body.back" :y2="body.r"></line>
+
+                <!-- Lenses -->
+                <g v-for="(lens, idx) of lensesSorted">
+                    <line :x1="lensFronts[idx]" :y1="-body.r" :x2="lensFronts[idx]" :y2="-lensRs[idx]"></line>
+                    <line :x1="lensFronts[idx]" :y1="body.r" :x2="lensFronts[idx]" :y2="lensRs[idx]"></line>
+                </g>
+
+                <!-- Aperture -->
+                <!-- <line :x1="aperture.x" :y1="-body.r" :x2="aperture.x" :y2="-aperture.r"></line> -->
+                <!-- <line :x1="aperture.x" :y1="body.r" :x2="aperture.x" :y2="aperture.r"></line> -->
+            </g>
+        </WithBackground>
+    </g>
+</template>
\ No newline at end of file
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 07d470d..7633dbe 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { lensGroups, releaseAllLenses, sensor, options, style, rUI, maxLightX } from '../globals'
-import { vec, calcLensF, calcRMax } from '../math'
+import { vec, calcLensF, calcRMax, calcLensFront, calcLensBack } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import type { Lens } from '../type'
 import WithBackground from './WithBackground.vue'
@@ -41,25 +41,11 @@ const r = computed(() => {
 })
 
 const leftX = computed(() => {
-    const x = props.lens.x1
-    const R1 = props.lens.R1
-    const d = Math.abs(R1) - Math.sqrt(R1 * R1 - r.value * r.value)
-    if (R1 > 0) {
-        return x + d
-    } else {
-        return x - d
-    }
+    return calcLensFront(props.lens)
 })
 
 const rightX = computed(() => {
-    const x = props.lens.x2
-    const R2 = props.lens.R2
-    const d = Math.abs(R2) - Math.sqrt(R2 * R2 - r.value * r.value)
-    if (R2 > 0) {
-        return x + d
-    } else {
-        return x - d
-    }
+    return calcLensBack(props.lens)
 })
 
 const path = computed(() => {
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 826257f..68a8957 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import { state, lights, lensGroups, sensor, style, apple, options, infR, rUI } from '../globals'
+import { state, lights, lensGroups, sensor, style, apple, options, infR, rUI, aperture } from '../globals'
 import * as h from '../handlers'
 import { Light } from '../type'
 import { vec } from '../math'
@@ -12,6 +12,8 @@ import LightParallel from './LightParallel.vue'
 import LensGroup from './LensGroup.vue'
 import WithBackground from './WithBackground.vue'
 import CircleUI from './CircleUI.vue'
+import Aperture from './Aperture.vue'
+import Body from './Body.vue'
 
 // Reference to the svg element
 // This is needed for handles in handlers.ts
@@ -67,6 +69,9 @@ const strokeDashArray = computed(() => {
     <!-- Grid -->
     <Grid v-if="options.grid"></Grid>
 
+    <!-- Body -->
+    <Body v-if="options.body"></Body>
+
     <!-- Guidelines -->
     <Guideline v-if="options.lens && options.sensor && options.angleOfView"></Guideline>
 
@@ -77,6 +82,9 @@ const strokeDashArray = computed(() => {
       </g>
     </g>
 
+    <!-- Aperture -->
+    <Aperture v-if="options.aperture"></Aperture>
+
     <!-- Apple -->
     <g v-if="options.apple">
       <g v-for="(light, idx) of apple">
diff --git a/src/globals.ts b/src/globals.ts
index 43941b3..5ed47bc 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -1,5 +1,5 @@
 import { ref, computed } from "vue"
-import { Vec, vec } from "./math"
+import { Vec, calcLensFront, vec } from "./math"
 import { type Lens, type LensGroup, Light } from "./type"
 
 //================================
@@ -38,7 +38,7 @@ export const lights0 = ():
 export const lights = ref(lights0())
 
 //--------------------------------
-// Items
+// Lenses
 //--------------------------------
 
 export const defaultConvexLens = (x: number) => {
@@ -60,9 +60,9 @@ export const lensGroups0 = (): LensGroup[] => {
 export const lensGroups = ref(lensGroups0())
 
 export const lensesSorted = computed(() => {
-  const res = lensGroups.value.reduce((acc: Lens[], cur: LensGroup) => { return acc.concat(cur.lenses) }, [])
-  res.sort((a, b) => { return a.x1 - b.x1 })
-  return res
+    const res = lensGroups.value.reduce((acc: Lens[], cur: LensGroup) => { return acc.concat(cur.lenses) }, [])
+    res.sort((a, b) => { return a.x1 - b.x1 })
+    return res
 })
 
 export const releaseAllLenses = () => {
@@ -75,6 +75,18 @@ export const releaseAllLenses = () => {
 // Sensor
 //--------------------------------
 
+export const aperture0 = () => {
+    return {
+        x: 40,
+        r: 10,
+    }
+}
+export const aperture = ref(aperture0())
+
+//--------------------------------
+// Sensor
+//--------------------------------
+
 export const sensor0 = () => {
     return {
         x: 80,
@@ -264,4 +276,21 @@ export const maxLightX = computed(() => {
 export const rUI = computed(() => {
     const scale = 1 / state.value.scale
     return 8 * scale;
+})
+
+export const body = computed(() => {
+    const rs = lensGroups.value.reduce((acc: number[], lensGroup) => {
+        const rs = lensGroup.lenses.map((lens) => lens.r + rUI.value * 2)
+        return acc.concat(rs)
+    }, []).concat([aperture.value.r, sensor.value.r + rUI.value * 2])
+    const r = Math.max(...rs)
+
+    const front = Math.min(aperture.value.x, calcLensFront(lensesSorted.value[0]))
+    const back = sensor.value.x + rUI.value * 2
+
+    return {
+        r,
+        front,
+        back,
+    }
 })
\ No newline at end of file
diff --git a/src/math.ts b/src/math.ts
index c754e85..9543b88 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -1,3 +1,5 @@
+import type { Lens } from "./type"
+
 //================================
 // Liner algebra
 //================================
@@ -256,7 +258,7 @@ export const fGaussian = (f: number, px: number, py: number) => {
     return vec(qx, qy)
 }
 
-export const calcLensF = (lens: any) => {
+export const calcLensF = (lens: Lens) => {
     const d = lens.x2 - lens.x1
     const R1 = lens.R1
     const R2 = lens.R2
@@ -265,7 +267,7 @@ export const calcLensF = (lens: any) => {
     return 1 / inv
 }
 
-export const calcRMax = (lens: any) => {
+export const calcRMax = (lens: Lens) => {
     const R1 = Math.abs(lens.R1)
     const R2 = Math.abs(lens.R2)
     const c1 = vec(lens.x1 + lens.R1, 0)
@@ -285,4 +287,35 @@ export const calcRMax = (lens: any) => {
     } else {
         return minR
     }
+}
+
+export const calcLensR = (lens: Lens) => {
+    const rMax = calcRMax(lens)
+    return Math.min(rMax, lens.r)
+}
+
+// TODO: merge with calcLensBack
+export const calcLensFront = (lens: Lens) => {
+    const x = lens.x1
+    const R1 = lens.R1
+    const r = calcLensR(lens)
+    const d = Math.abs(R1) - Math.sqrt(R1 * R1 - r * r)
+    if (R1 > 0) {
+        return x + d
+    } else {
+        return x - d
+    }
+}
+
+export const calcLensBack = (lens: Lens) => {
+    const x = lens.x2
+    const R2 = lens.R2
+    const r = calcLensR(lens)
+    const d = Math.abs(R2) - Math.sqrt(R2 * R2 - r * r)
+    if (R2 > 0) {
+        return x + d
+    } else {
+        return x - d
+    }
+
 }
\ No newline at end of file

From dd3ea304addf947c7793a44f9c8d14dd58a13603 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Thu, 27 Jun 2024 04:13:34 +0900
Subject: [PATCH 34/53] Body collision

---
 src/Canvas.vue       | 147 +++++++++++++++++++++++++------------------
 src/SVG/Aperture.vue |  16 ++---
 src/SVG/Body.vue     |  28 +--------
 src/globals.ts       |  30 +++++++--
 src/math.ts          |  40 ++++++++++--
 5 files changed, 158 insertions(+), 103 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index bc76a52..cb88eac 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { watch, onMounted, ref, computed } from 'vue'
 
-import { state, lights, lensGroups, sensor, sensorData, apple, options, style, infR, lensesSorted } from './globals'
-import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS, calcRMax } from './math'
+import { state, lights, lensGroups, sensor, sensorData, apple, options, style, infR, lensesSorted, lensRs, lensFs, body, lensFronts, aperture, lensBacks } from './globals'
+import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS, calcRMax, intersectionX, intersectionY } from './math'
 
 import { Light, type Lens, type LensGroup } from './type'
 
@@ -27,13 +27,49 @@ const drawSegment = (p: Vec, v: Vec, length: number) => {
   return q
 };
 
-const fs = computed(() => {
-  return lensesSorted.value.map((lens) => calcLensF(lens))
-})
+const intersectionBody = (s: Vec, v: Vec) => {
+  v = v.normalize()
+  let ps = []
 
-const rMaxes = computed(() => {
-  return lensesSorted.value.map((lens) => calcRMax(lens))
-})
+  // Outlines
+  if (options.value.body) {
+    ps.push(intersectionX(s, v, -body.value.r, body.value.front, body.value.back))
+    ps.push(intersectionX(s, v, body.value.r, body.value.front, body.value.back))
+    ps.push(intersectionY(s, v, body.value.back, -body.value.r, body.value.r))
+  }
+
+  // Lenses
+  lensesSorted.value.forEach((lens, idx) => {
+    const lensR = lensRs.value[idx]
+    const front = lensFronts.value[idx]
+    const back = lensBacks.value[idx]
+    // Lens to body
+    if (options.value.body) {
+      ps.push(intersectionY(s, v, front, -body.value.r, -lensR))
+      ps.push(intersectionY(s, v, front, lensR, body.value.r))
+    }
+    // Upper / Bottom
+    ps.push(intersectionX(s, v, -lensR, front, back))
+    ps.push(intersectionX(s, v, lensR, front, back))
+    // Aperture
+    const xm = (lens.x1 + lens.x2) / 2
+    ps.push(intersectionY(s, v, xm, -lensR, -lensR * lens.aperture))
+    ps.push(intersectionY(s, v, xm, lensR * lens.aperture, lensR))
+  })
+
+  // Aperture
+  ps.push(intersectionY(s, v, aperture.value.x, -body.value.r, -aperture.value.r))
+  ps.push(intersectionY(s, v, aperture.value.x, aperture.value.r, body.value.r))
+
+  ps = ps.filter((p) => p.p !== null)
+  ps.sort((p, q) => p.d - q.d)
+
+  if (ps.length === 0) {
+    return { p: null, d: null }
+  } else {
+    return ps[0]
+  }
+}
 
 const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
   // Multiple lens
@@ -41,8 +77,8 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     const lens = lensesSorted.value[lensIdx]
     const s0 = s.copy()
     const xm = (lens.x1 + lens.x2) / 2
-    const f = fs.value[lensIdx]
-    const r = Math.min(rMaxes.value[lensIdx], lens.r)
+    const f = lensFs.value[lensIdx]
+    const r = lensRs.value[lensIdx]
     let innerLens = false
 
     // Find image position of the light source
@@ -56,8 +92,16 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
       // Center of lens curvature circle
       const c = vec(lens.x1 + lens.R1, 0)
 
-      const p = getIntersectionLens(s, v, c, r, lens.R1)
-      if (p) {
+      let pl = getIntersectionLens(s, v, c, r, lens.R1)
+      const pb = intersectionBody(s, v)
+      if ((pb.p && pl.p && pb.d < pl.d) || (!pl.p && pb.p)) {
+        v = pb.p.sub(s)
+        drawSegment(s, v, v.length())
+        return
+      }
+
+      if (pl.p) {
+        const p = pl.p
         v = p.sub(s)
         s = drawSegment(s, v, v.length())
 
@@ -75,22 +119,6 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
       }
     }
 
-    //--------------------------------
-    // Collision to aperture
-    //--------------------------------
-    if (options.value.aperture) {
-      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(xm, -r), vec(xm, r))
-      if (p) {
-        const upperHit = p.y > lens.aperture * r
-        const lowerHit = p.y < -lens.aperture * r
-        if (lowerHit || upperHit) {
-          v = p.sub(s)
-          drawSegment(s, v, v.length())
-          return
-        }
-      }
-    }
-
     //--------------------------------
     // Collision to lens surface (right-side)
     //--------------------------------
@@ -98,8 +126,15 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
       // Center of lens curvature circle
       const c = vec(lens.x2 + lens.R2, 0)
 
-      const p = getIntersectionLens(s, v, c, r, lens.R2)
-      if (p) {
+      const pl = getIntersectionLens(s, v, c, r, lens.R2)
+      const pb = intersectionBody(s, v)
+      if ((pb.p && pl.p && pb.d < pl.d) || (!pl.p && pb.p)) {
+        v = pb.p.sub(s)
+        drawSegment(s, v, v.length())
+        return
+      }
+      if (pl.p) {
+        const p = pl.p
         v = p.sub(s)
         const nextS = drawSegment(s, v, v.length())
 
@@ -120,8 +155,17 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     // Collision to ideal lens
     //--------------------------------
     if (options.value.lensIdeal && options.value.lens) {
-      const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(xm, -r), vec(xm, r))
-      if (p) {
+      const pl = intersectionY(s, v, xm, -r, r)
+      const pb = intersectionBody(s, v)
+      // TODO: Find better condition
+      const eps = 1e-9
+      if ((pb.p && pl.p && pb.d < pl.d + eps) || (!pl.p && pb.p)) {
+        v = pb.p.sub(s)
+        drawSegment(s, v, v.length())
+        return
+      }
+      if (pl.p) {
+        const p = pl.p
         v = p.sub(s)
         s = drawSegment(s, v, v.length())
 
@@ -141,36 +185,19 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     }
   }
 
-  //--------------------------------
-  // Collision to body
-  //--------------------------------
-  // if (options.value.body) {
-  //   // Upper
-  //   {
-  //     const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.value.x, -infR.value), vec(lens.value.x, -lens.value.r))
-  //     if (p) {
-  //       v = p.sub(s)
-  //       drawSegment(s, v, v.length())
-  //       return
-  //     }
-  //   }
-  //   // Lower
-  //   {
-  //     const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(lens.value.x, infR.value), vec(lens.value.x, lens.value.r))
-  //     if (p) {
-  //       v = p.sub(s)
-  //       drawSegment(s, v, v.length())
-  //       return
-  //     }
-  //   }
-  // }
-
   //--------------------------------
   // Collision to sensor
   //--------------------------------
   if (options.value.sensor) {
-    const p = intersectionSS(s, s.add(v.normalize().mul(infR.value)), vec(sensor.value.x, -sensor.value.r), vec(sensor.value.x, sensor.value.r))
-    if (p) {
+    const ps = intersectionY(s, v, sensor.value.x, -sensor.value.r, sensor.value.r)
+    const pb = intersectionBody(s, v)
+    if ((pb.p && ps.p && pb.d < ps.d) || (!ps.p && pb.p)) {
+      v = pb.p.sub(s)
+      drawSegment(s, v, v.length())
+      return
+    }
+    if (ps.p) {
+      const p = ps.p
       v = p.sub(s)
       drawSegment(s, v, v.length())
       sensorDataTmp.push({ y: p.y, color })
@@ -226,7 +253,7 @@ const draw = () => {
       const nRays = Math.floor((length / (2 * Math.PI)) * (1 << params.nRaysLog) * 0.01)
       for (let i = 0; i < nRays; i++) {
         const s = light.s.add(ln.mul(i / nRays * length))
-        const v = l.rotate(-Math.PI / 2)
+        const v = l.rotate(-Math.PI / 2).normalize()
         drawRay(s, v, light.color, sensorDataTmp)
       }
     }
@@ -266,7 +293,7 @@ onMounted(() => {
 })
 
 // TODO: Optimize here ('deep' is enabled)
-watch([state, lights, apple, lensGroups, sensor, options, style], () => {
+watch([state, lights, apple, lensGroups, aperture, sensor, options, style], () => {
   canvas.value.width = state.value.width
   canvas.value.height = state.value.height
   offscreenCanvas.width = state.value.width
diff --git a/src/SVG/Aperture.vue b/src/SVG/Aperture.vue
index 519c277..5c71c01 100644
--- a/src/SVG/Aperture.vue
+++ b/src/SVG/Aperture.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { aperture, body, maxLightX, rUI, sensor } from '@/globals';
+import { aperture, body, maxLightX, rUI, sensor, style } from '@/globals';
 import WithBackground from './WithBackground.vue';
 import * as h from '../handlers'
 import CircleUI from './CircleUI.vue';
@@ -42,17 +42,19 @@ const move = (e: any) => {
     <WithBackground>
         <g class="stroke-white normal">
             <!-- Top -->
-            <line :x1="aperture.x" :y1="-body.r - 2 * rUI" :x2="aperture.x" :y2="-aperture.r"></line>
+            <line :x1="aperture.x" :y1="-body.r - style.bodyPadding" :x2="aperture.x" :y2="-aperture.r"></line>
             <!-- Bottom -->
-            <line :x1="aperture.x" :y1="body.r + 2 * rUI" :x2="aperture.x" :y2="aperture.r"></line>
+            <line :x1="aperture.x" :y1="body.r + style.bodyPadding" :x2="aperture.x" :y2="aperture.r"></line>
             <g class="ui-stroke transparent grab" @mousedown="move">
                 <!-- Top -->
-                <line :x1="aperture.x" :y1="-body.r - 2 * rUI" :x2="aperture.x" :y2="-aperture.r"></line>
+                <line :x1="aperture.x" :y1="-body.r - style.bodyPadding" :x2="aperture.x" :y2="-aperture.r"></line>
                 <!-- Bottom -->
-                <line :x1="aperture.x" :y1="body.r + 2 * rUI" :x2="aperture.x" :y2="aperture.r"></line>
+                <line :x1="aperture.x" :y1="body.r + style.bodyPadding" :x2="aperture.x" :y2="aperture.r"></line>
             </g>
-            <CircleUI :c="vec(aperture.x, -aperture.r)" class="vertical-resize" @mousedown="resize($event, -1)"></CircleUI>
-            <CircleUI :c="vec(aperture.x, aperture.r)" class="vertical-resize" @mousedown="resize($event, +1)"></CircleUI>
+            <CircleUI :c="vec(aperture.x, -aperture.r)" class="vertical-resize" @mousedown="resize($event, -1)">
+            </CircleUI>
+            <CircleUI :c="vec(aperture.x, aperture.r)" class="vertical-resize" @mousedown="resize($event, +1)">
+            </CircleUI>
         </g>
     </WithBackground>
 </template>
\ No newline at end of file
diff --git a/src/SVG/Body.vue b/src/SVG/Body.vue
index 986fa58..c390bb9 100644
--- a/src/SVG/Body.vue
+++ b/src/SVG/Body.vue
@@ -1,28 +1,6 @@
 <script setup lang="ts">
-import { aperture, body, lensGroups, lensesSorted } from '@/globals';
+import { body, lensesSorted, lensFronts, lensRs } from '@/globals';
 import WithBackground from './WithBackground.vue';
-import { computed } from 'vue';
-import { calcLensFront, calcLensR } from '@/math';
-
-// const frontR = computed(() => {
-//     if (aperture.value.x < calcLensFront(lensesSorted.value[0])){
-//         return aperture.value.r
-//     } else {
-//         return calcLensR(lensesSorted.value[0])
-//     }
-// })
-
-const lensFronts = computed(() => {
-    return lensesSorted.value.map((lens) => {
-        return calcLensFront(lens)
-    })
-})
-
-const lensRs = computed(()=>{
-    return lensesSorted.value.map((lens)=>{
-        return calcLensR(lens)
-    })
-})
 
 </script>
 
@@ -40,10 +18,6 @@ const lensRs = computed(()=>{
                     <line :x1="lensFronts[idx]" :y1="-body.r" :x2="lensFronts[idx]" :y2="-lensRs[idx]"></line>
                     <line :x1="lensFronts[idx]" :y1="body.r" :x2="lensFronts[idx]" :y2="lensRs[idx]"></line>
                 </g>
-
-                <!-- Aperture -->
-                <!-- <line :x1="aperture.x" :y1="-body.r" :x2="aperture.x" :y2="-aperture.r"></line> -->
-                <!-- <line :x1="aperture.x" :y1="body.r" :x2="aperture.x" :y2="aperture.r"></line> -->
             </g>
         </WithBackground>
     </g>
diff --git a/src/globals.ts b/src/globals.ts
index 5ed47bc..8ff7ebd 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -1,5 +1,5 @@
 import { ref, computed } from "vue"
-import { Vec, calcLensFront, vec } from "./math"
+import { Vec, calcLensFront, vec, calcLensF, calcLensR, calcLensBack } from "./math"
 import { type Lens, type LensGroup, Light } from "./type"
 
 //================================
@@ -65,6 +65,26 @@ export const lensesSorted = computed(() => {
     return res
 })
 
+export const lensFs = computed(() => {
+    return lensesSorted.value.map((lens) => calcLensF(lens))
+})
+
+export const lensRs = computed(() => {
+    return lensesSorted.value.map((lens) => calcLensR(lens))
+})
+
+export const lensFronts = computed(() => {
+    return lensesSorted.value.map((lens) => {
+        return calcLensFront(lens)
+    })
+})
+
+export const lensBacks = computed(() => {
+    return lensesSorted.value.map((lens) => {
+        return calcLensBack(lens)
+    })
+})
+
 export const releaseAllLenses = () => {
     for (const lensGroup of lensGroups.value) {
         lensGroup.selected = false
@@ -206,6 +226,7 @@ export const style0 = () => {
         // UI
         widthUI: 1.0,
         lineBgColor: "#000a",
+        bodyPadding: 4,
     }
 }
 export const style = ref(style0())
@@ -279,14 +300,15 @@ export const rUI = computed(() => {
 })
 
 export const body = computed(() => {
+    const padding = style.value.bodyPadding
     const rs = lensGroups.value.reduce((acc: number[], lensGroup) => {
-        const rs = lensGroup.lenses.map((lens) => lens.r + rUI.value * 2)
+        const rs = lensGroup.lenses.map((lens) => lens.r + padding)
         return acc.concat(rs)
-    }, []).concat([aperture.value.r, sensor.value.r + rUI.value * 2])
+    }, []).concat([aperture.value.r, sensor.value.r + padding])
     const r = Math.max(...rs)
 
     const front = Math.min(aperture.value.x, calcLensFront(lensesSorted.value[0]))
-    const back = sensor.value.x + rUI.value * 2
+    const back = sensor.value.x + padding
 
     return {
         r,
diff --git a/src/math.ts b/src/math.ts
index 9543b88..35cda38 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -220,6 +220,36 @@ export const intersectionCC = (c1: Vec, r1: number, c2: Vec, r2: number) => {
     return [c1.add(n.rotate(theta).inplaceMul(r1)), c1.add(n.rotate(-theta).inplaceMul(r1))]
 }
 
+export const intersectionY = (s: Vec, v: Vec, x: number, yMin: number, yMax: number) => {
+    v = v.normalize()
+    const d = (x - s.x) / v.x
+    if (!isFinite(d) || d < 0) {
+        return {p: null, d}
+    } else {
+        const p = s.add(v.mul(d))
+        if (p.y < yMin || p.y > yMax) {
+            return {p: null, d}
+        } else {
+            return {p, d}
+        }
+    }
+}
+
+export const intersectionX = (s: Vec, v: Vec, y: number, xMin: number, xMax: number) => {
+    v = v.normalize()
+    const d = (y - s.y) / v.y
+    if (!isFinite(d) || d < 0) {
+        return {p: null, d}
+    } else {
+        const p = s.add(v.mul(d))
+        if (p.x < xMin || p.x > xMax) {
+            return {p: null, d}
+        } else {
+            return {p, d}
+        }
+    }
+}
+
 //================================
 // Lens
 //================================
@@ -232,7 +262,7 @@ export const getIntersectionLens = (s: Vec, v: Vec, cl: Vec, r: number /* lens d
     const c = Math.pow(s.x - cl.x, 2) + Math.pow(s.y - cl.y, 2) - absR * absR;
     const cond = b * b - 4 * a * c;
     if (cond < 0) {
-        return null
+        return {p: null, d: 0}
     }
     const d1 = (-b - Math.sqrt(cond)) / (2 * a);
     const d2 = (-b + Math.sqrt(cond)) / (2 * a);
@@ -241,15 +271,15 @@ export const getIntersectionLens = (s: Vec, v: Vec, cl: Vec, r: number /* lens d
     const ty = s.y + d * n.y;
     // TODO: Workarounds
     if (Math.abs(ty) > r || d < 0) {
-        return null
+        return {p: null, d}
     }
     if (R >= 0 && tx >= cl.x) {
-        return null
+        return {p: null, d}
     }
     if (R < 0 && tx < cl.x) {
-        return null
+        return {p: null, d}
     }
-    return vec(tx, ty)
+    return {p: vec(tx, ty), d}
 }
 
 export const fGaussian = (f: number, px: number, py: number) => {

From 785c5363a7b66dcd0f8971f35466c9234ca3c1b5 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Thu, 27 Jun 2024 04:44:27 +0900
Subject: [PATCH 35/53] Better body

---
 src/Canvas.vue       | 55 +++++++++++++++++++++++++++-----------------
 src/SVG/Aperture.vue |  2 +-
 src/SVG/Body.vue     | 14 ++++++-----
 src/globals.ts       | 51 +++++++++++++++++++++++++++++++++-------
 4 files changed, 86 insertions(+), 36 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index cb88eac..4c5feaa 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -32,34 +32,40 @@ const intersectionBody = (s: Vec, v: Vec) => {
   let ps = []
 
   // Outlines
-  if (options.value.body) {
+  if (options.value.body && body.value.r && body.value.front && body.value.back) {
     ps.push(intersectionX(s, v, -body.value.r, body.value.front, body.value.back))
     ps.push(intersectionX(s, v, body.value.r, body.value.front, body.value.back))
-    ps.push(intersectionY(s, v, body.value.back, -body.value.r, body.value.r))
+    if (options.value.sensor) {
+      ps.push(intersectionY(s, v, body.value.back, -body.value.r, body.value.r))
+    }
   }
 
   // Lenses
-  lensesSorted.value.forEach((lens, idx) => {
-    const lensR = lensRs.value[idx]
-    const front = lensFronts.value[idx]
-    const back = lensBacks.value[idx]
-    // Lens to body
-    if (options.value.body) {
-      ps.push(intersectionY(s, v, front, -body.value.r, -lensR))
-      ps.push(intersectionY(s, v, front, lensR, body.value.r))
-    }
-    // Upper / Bottom
-    ps.push(intersectionX(s, v, -lensR, front, back))
-    ps.push(intersectionX(s, v, lensR, front, back))
-    // Aperture
-    const xm = (lens.x1 + lens.x2) / 2
-    ps.push(intersectionY(s, v, xm, -lensR, -lensR * lens.aperture))
-    ps.push(intersectionY(s, v, xm, lensR * lens.aperture, lensR))
-  })
+  if (options.value.lens) {
+    lensesSorted.value.forEach((lens, idx) => {
+      const lensR = lensRs.value[idx]
+      const front = lensFronts.value[idx]
+      const back = lensBacks.value[idx]
+      // Lens to body
+      if (options.value.body && body.value.r) {
+        ps.push(intersectionY(s, v, front, -body.value.r, -lensR))
+        ps.push(intersectionY(s, v, front, lensR, body.value.r))
+      }
+      // Upper / Bottom
+      ps.push(intersectionX(s, v, -lensR, front, back))
+      ps.push(intersectionX(s, v, lensR, front, back))
+      // Aperture
+      const xm = (lens.x1 + lens.x2) / 2
+      ps.push(intersectionY(s, v, xm, -lensR, -lensR * lens.aperture))
+      ps.push(intersectionY(s, v, xm, lensR * lens.aperture, lensR))
+    })
+  }
 
   // Aperture
-  ps.push(intersectionY(s, v, aperture.value.x, -body.value.r, -aperture.value.r))
-  ps.push(intersectionY(s, v, aperture.value.x, aperture.value.r, body.value.r))
+  if (options.value.aperture && body.value.r) {
+    ps.push(intersectionY(s, v, aperture.value.x, -body.value.r, -aperture.value.r))
+    ps.push(intersectionY(s, v, aperture.value.x, aperture.value.r, body.value.r))
+  }
 
   ps = ps.filter((p) => p.p !== null)
   ps.sort((p, q) => p.d - q.d)
@@ -205,6 +211,13 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     }
   }
 
+  const pb = intersectionBody(s, v)
+  if (pb.p) {
+    v = pb.p.sub(s)
+    drawSegment(s, v, v.length())
+    return
+  }
+
   // to infinity
   drawSegment(s, v, infR.value)
   return
diff --git a/src/SVG/Aperture.vue b/src/SVG/Aperture.vue
index 5c71c01..891810f 100644
--- a/src/SVG/Aperture.vue
+++ b/src/SVG/Aperture.vue
@@ -40,7 +40,7 @@ const move = (e: any) => {
 
 <template>
     <WithBackground>
-        <g class="stroke-white normal">
+        <g v-if="body.r" class="stroke-white normal">
             <!-- Top -->
             <line :x1="aperture.x" :y1="-body.r - style.bodyPadding" :x2="aperture.x" :y2="-aperture.r"></line>
             <!-- Bottom -->
diff --git a/src/SVG/Body.vue b/src/SVG/Body.vue
index c390bb9..5ef74f4 100644
--- a/src/SVG/Body.vue
+++ b/src/SVG/Body.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { body, lensesSorted, lensFronts, lensRs } from '@/globals';
+import { body, lensesSorted, lensFronts, lensRs, options } from '@/globals';
 import WithBackground from './WithBackground.vue';
 
 </script>
@@ -7,16 +7,18 @@ import WithBackground from './WithBackground.vue';
 <template>
     <g>
         <WithBackground>
-            <g class="stroke-white thick">
+            <g v-if="body.front && body.back && body.r" class="stroke-white thicker">
                 <!-- Outline -->
                 <line :x1="body.front" :y1="-body.r" :x2="body.back" :y2="-body.r"></line>
                 <line :x1="body.front" :y1="body.r" :x2="body.back" :y2="body.r"></line>
-                <line :x1="body.back" :y1="-body.r" :x2="body.back" :y2="body.r"></line>
+                <line v-if="options.sensor" :x1="body.back" :y1="-body.r" :x2="body.back" :y2="body.r"></line>
 
                 <!-- Lenses -->
-                <g v-for="(lens, idx) of lensesSorted">
-                    <line :x1="lensFronts[idx]" :y1="-body.r" :x2="lensFronts[idx]" :y2="-lensRs[idx]"></line>
-                    <line :x1="lensFronts[idx]" :y1="body.r" :x2="lensFronts[idx]" :y2="lensRs[idx]"></line>
+                <g v-if="options.lens">
+                    <g v-for="(lens, idx) of lensesSorted">
+                        <line :x1="lensFronts[idx]" :y1="-body.r" :x2="lensFronts[idx]" :y2="-lensRs[idx]"></line>
+                        <line :x1="lensFronts[idx]" :y1="body.r" :x2="lensFronts[idx]" :y2="lensRs[idx]"></line>
+                    </g>
                 </g>
             </g>
         </WithBackground>
diff --git a/src/globals.ts b/src/globals.ts
index 8ff7ebd..be94d93 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -300,15 +300,50 @@ export const rUI = computed(() => {
 })
 
 export const body = computed(() => {
+    const lensExist = options.value.lens && lensesSorted.value.length > 0
     const padding = style.value.bodyPadding
-    const rs = lensGroups.value.reduce((acc: number[], lensGroup) => {
-        const rs = lensGroup.lenses.map((lens) => lens.r + padding)
-        return acc.concat(rs)
-    }, []).concat([aperture.value.r, sensor.value.r + padding])
-    const r = Math.max(...rs)
-
-    const front = Math.min(aperture.value.x, calcLensFront(lensesSorted.value[0]))
-    const back = sensor.value.x + padding
+
+    let rs: number[] = []
+    if (options.value.lens) {
+        rs = lensGroups.value.reduce((acc: number[], lensGroup) => {
+            const rs = lensGroup.lenses.map((lens) => lens.r + padding)
+            return acc.concat(rs)
+        }, [])
+    }
+    if (options.value.aperture) {
+        rs.push(aperture.value.r)
+    }
+    if (options.value.sensor) {
+        rs.push(sensor.value.r + padding)
+    }
+
+    let r = null
+    if (rs.length > 0) {
+        r = Math.max(...rs)
+    }
+
+    let front = null
+    if (lensExist) {
+        if (options.value.aperture) {
+            front = Math.min(aperture.value.x, calcLensFront(lensesSorted.value[0]))
+        } else {
+            front = calcLensFront(lensesSorted.value[0])
+        }
+    } else {
+        if (options.value.aperture) {
+            front = aperture.value.x
+        }
+    }
+    let back = null
+    if (options.value.sensor) {
+        back = sensor.value.x + padding
+    } else if (lensExist) {
+        if (options.value.aperture) {
+            back = Math.max(...lensFronts.value, aperture.value.x)
+        } else {
+            back = Math.max(...lensFronts.value)
+        }
+    }
 
     return {
         r,

From b0df6347164138840e6df2887d946d94b1a0a68f Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Thu, 27 Jun 2024 16:29:56 +0900
Subject: [PATCH 36/53] Body move

---
 src/SVG/Body.vue           | 36 +++++++++++++++++++++++++++++++++---
 src/SVG/SVG.vue            | 19 +++++++++++++++++++
 src/SVG/WithBackground.vue | 12 ++++++++++++
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/src/SVG/Body.vue b/src/SVG/Body.vue
index 5ef74f4..71d776c 100644
--- a/src/SVG/Body.vue
+++ b/src/SVG/Body.vue
@@ -1,12 +1,42 @@
 <script setup lang="ts">
-import { body, lensesSorted, lensFronts, lensRs, options } from '@/globals';
+import { aperture, body, lensesSorted, lensFronts, lensGroups, lensRs, maxLensX, maxLightX, options, sensor } from '@/globals';
 import WithBackground from './WithBackground.vue';
+import * as h from '../handlers'
+
+const move = (e: any) => {
+    h.preventDefaultAndStopPropagation(e)
+    const m0 = h.getPositionOnSvg(e)
+    const x10 = lensGroups.value.map((lensGroup) => lensGroup.lenses.map((lens) => lens.x1))
+    const x20 = lensGroups.value.map((lensGroup) => lensGroup.lenses.map((lens) => lens.x2))
+    const sensorX0 = sensor.value.x
+    const apertureX0 = aperture.value.x
+    h.setMoveHandler((e_: any) => {
+        const d = h.getPositionDiffOnSvgApp(e_, m0)
+        let minX = Math.min(sensor.value.x, aperture.value.x)
+        if (lensesSorted.value.length > 0) {
+            minX = Math.min(minX, lensesSorted.value[0].x1)
+        }
+        if (minX + d.x < maxLightX.value) {
+            d.x = maxLightX.value - minX
+        }
+
+        // Update
+        lensGroups.value.forEach((lensGroup, i) => {
+            lensGroup.lenses.forEach((lens, j) => {
+                lens.x1 = x10[i][j] + d.x
+                lens.x2 = x20[i][j] + d.x
+            })
+        })
+        sensor.value.x = sensorX0 + d.x
+        aperture.value.x = apertureX0 + d.x
+    })
+}
 
 </script>
 
 <template>
-    <g>
-        <WithBackground>
+    <g @mousedown="move" class="grab">
+        <WithBackground :ui="true">
             <g v-if="body.front && body.back && body.r" class="stroke-white thicker">
                 <!-- Outline -->
                 <line :x1="body.front" :y1="-body.r" :x2="body.back" :y2="-body.r"></line>
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 68a8957..cabcb9f 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -70,6 +70,7 @@ const strokeDashArray = computed(() => {
     <Grid v-if="options.grid"></Grid>
 
     <!-- Body -->
+
     <Body v-if="options.body"></Body>
 
     <!-- Guidelines -->
@@ -214,4 +215,22 @@ svg {
     stroke-width: v-bind('strokeWidth.boldBg');
   }
 }
+
+.ui {
+  .fill-white {
+    fill: transparent;
+  }
+
+  .stroke-white {
+    stroke: transparent;
+  }
+
+  .thicker,
+  .thick,
+  .normal,
+  .bold {
+    stroke-width: v-bind((2 * rUI));
+    pointer-events: stroke;
+  }
+}
 </style>
diff --git a/src/SVG/WithBackground.vue b/src/SVG/WithBackground.vue
index 76de2c0..8a394c1 100644
--- a/src/SVG/WithBackground.vue
+++ b/src/SVG/WithBackground.vue
@@ -1,3 +1,12 @@
+<script setup lang="ts">
+const props = defineProps({
+    ui: {
+        type: Boolean,
+        default: false,
+    }
+})
+</script>
+
 <template>
     <g class="background">
         <slot></slot>
@@ -5,4 +14,7 @@
     <g class="foreground">
         <slot></slot>
     </g>
+    <g v-if="ui" class="ui">
+        <slot></slot>
+    </g>
 </template>
\ No newline at end of file

From 5fe2d76f03bec837f4b161104f10367ed7706beb Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Thu, 27 Jun 2024 16:45:44 +0900
Subject: [PATCH 37/53] Some move fixes

---
 src/Controller.vue   |  6 +++---
 src/SVG/Aperture.vue |  2 +-
 src/SVG/Body.vue     | 10 ++++++----
 src/globals.ts       |  2 +-
 src/handlers.ts      | 11 ++++++-----
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/Controller.vue b/src/Controller.vue
index 1624825..80ea920 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -79,15 +79,15 @@ const nRays = computed(() => {
             <td><label><input type="checkbox" v-model="options.aperture"> Aperture</label></td>
         </tr> -->
         <template v-if="options.lens">
+            <tr>
+                <td><label><input type="checkbox" v-model="options.lensIdeal"> Ideal lens</label></td>
+            </tr>
             <template v-if="options.advanced">
                 <tr>
                     <td><label><input type="checkbox" v-model="options.curvature"> Curvature</label></td>
                     <td></td>
                     <!-- <td>{{ humanReadable(lensR) }}</td> -->
                 </tr>
-                <tr>
-                    <td><label><input type="checkbox" v-model="options.lensIdeal"> Ideal lens</label></td>
-                </tr>
                 <tr>
                     <td>
                         <button @click="lensGroups.push({ lenses: [defaultConvexLens(0)], selected: false })">Add convex
diff --git a/src/SVG/Aperture.vue b/src/SVG/Aperture.vue
index 891810f..8bd0c0e 100644
--- a/src/SVG/Aperture.vue
+++ b/src/SVG/Aperture.vue
@@ -30,7 +30,7 @@ const move = (e: any) => {
         if (xn < maxLightX.value) {
             xn = maxLightX.value
         } else if (xn > sensor.value.x - rUI.value) {
-            xn = sensor.value.x - rUI.value
+            xn = sensor.value.x
         }
         aperture.value.x = xn
     })
diff --git a/src/SVG/Body.vue b/src/SVG/Body.vue
index 71d776c..d3b9844 100644
--- a/src/SVG/Body.vue
+++ b/src/SVG/Body.vue
@@ -12,10 +12,12 @@ const move = (e: any) => {
     const apertureX0 = aperture.value.x
     h.setMoveHandler((e_: any) => {
         const d = h.getPositionDiffOnSvgApp(e_, m0)
-        let minX = Math.min(sensor.value.x, aperture.value.x)
-        if (lensesSorted.value.length > 0) {
-            minX = Math.min(minX, lensesSorted.value[0].x1)
-        }
+        let minX = Math.min(sensorX0, apertureX0)
+        x10.forEach((g) =>[
+            g.forEach((x1) => {
+                minX = Math.min(minX, x1)
+            })
+        ])
         if (minX + d.x < maxLightX.value) {
             d.x = maxLightX.value - minX
         }
diff --git a/src/globals.ts b/src/globals.ts
index be94d93..ccc08dc 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -201,7 +201,7 @@ export const options0 = () => {
         sensor: true,
         sensorPreview: true,
         sensorMemory: false,
-        body: false,
+        body: true,
         aperture: true,
         grid: false,
         opticalAxis: false,
diff --git a/src/handlers.ts b/src/handlers.ts
index 76de105..63de49d 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import { state, lights, sensor, minLensX, maxLensX, releaseAllLenses } from "./globals";
+import { state, lights, sensor, minLensX, maxLensX, releaseAllLenses, aperture } from "./globals";
 import { Light } from './type'
 import { vec, Vec } from './math'
 
@@ -125,11 +125,12 @@ export const sensorMoveStartHandler = (e: any) => {
     const cx0 = sensor.value.x;
     moveHandler = (e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
-        if (cx0 + d.x < maxLensX.value) {
-            sensor.value.x = maxLensX.value
-        } else {
-            sensor.value.x = cx0 + d.x
+        const maxX = Math.max(maxLensX.value, aperture.value.x)
+        if (cx0 + d.x < maxX) {
+            sensor.value.x = maxX
+            return
         }
+        sensor.value.x = cx0 + d.x
     }
 }
 export const sensorSizeChangeStartHandler = (e: any) => {

From 388288b8b51feee571759a293d14213cd3d9f0b0 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Thu, 27 Jun 2024 22:49:48 +0900
Subject: [PATCH 38/53] Principal point and focal point of multiple lenses

---
 src/Controller.vue |  2 +-
 src/SVG/Lens.vue   | 44 ++++++++++++--------------------------------
 src/SVG/Point.vue  | 18 ++++++++++++++++++
 src/SVG/SVG.vue    |  7 ++++++-
 src/globals.ts     | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 83 insertions(+), 34 deletions(-)
 create mode 100644 src/SVG/Point.vue

diff --git a/src/Controller.vue b/src/Controller.vue
index 80ea920..08aa89b 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { state, lensGroups, defaultConvexLens, defaultConcaveLens, sensor, appleProps, options, style } from './globals'
+import { state, lensGroups, defaultConvexLens, defaultConcaveLens, sensor, appleProps, options, style, globalLensInfo } from './globals'
 import { humanReadable } from './utils';
 import { Light } from "./type"
 
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index 7633dbe..d459e52 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -6,6 +6,7 @@ import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, get
 import type { Lens } from '../type'
 import WithBackground from './WithBackground.vue'
 import CircleUI from './CircleUI.vue'
+import Point from './Point.vue'
 
 const props = defineProps<{
     lens: Lens,
@@ -190,19 +191,6 @@ const lensSizeChangeStartHandler = (e: any) => {
         }
     })
 }
-// const focalPointMoveStartHandler = (e: any) => {
-//     preventDefaultAndStopPropagation(e)
-//     const m0 = getPositionOnSvg(e);
-//     const f0 = props.lens.f;
-//     setMoveHandler((e_: any) => {
-//         const d = getPositionDiffOnSvgApp(e_, m0)
-//         if (f0 - d.x < props.lens.d / 2) {
-//             items.value[props.idx].f = props.lens.d / 2
-//         } else {
-//             items.value[props.idx].f = f0 - d.x
-//         }
-//     })
-// }
 
 const apertureSizeChangeStartHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)
@@ -234,20 +222,16 @@ const apertureSizeChangeStartHandler = (e: any) => {
                     <circle :cx="lens.x1 + lens.R1" :cy="0" :r="Math.abs(lens.R1)"></circle>
                     <circle :cx="lens.x2 + lens.R2" :cy="0" :r="Math.abs(lens.R2)"></circle>
                 </g>
-                <!-- center point -->
-                <g class="fill-white stroke-white normal">
-                    <circle :cx="lens.x1 + lens.R1" cy="0" :r="rUI / 2"></circle>
-                    <circle :cx="lens.x2 + lens.R2" cy="0" :r="rUI / 2"></circle>
-                </g>
             </WithBackground>
+            <!-- Center Pointg -->
+            <Point :c="vec(lens.x1 + lens.R1, 0)"></Point>
+            <Point :c="vec(lens.x2 + lens.R2, 0)"></Point>
         </g>
 
         <!-- Hyperfocal point -->
         <g
             v-if="options.lens && options.sensor && options.circleOfConfusion && options.angleOfView && options.depthOfField && options.hyperfocalPoint">
-            <WithBackground>
-                <circle :cx="H" cy=" 0" :r="rUI / 2" class="fill-white stroke-white normal"></circle>
-            </WithBackground>
+            <Point :c="vec(H, 0)"></Point>
         </g>
 
         <!-- Lens -->
@@ -281,17 +265,13 @@ const apertureSizeChangeStartHandler = (e: any) => {
 
         <!-- Focal points -->
         <g v-if="options.lensFocalPoints">
-            <WithBackground>
-                <g class="fill-white stroke-white normal">
-                    <circle :cx="xm - f" cy="0" :r="rUI / 2"></circle>
-                    <circle :cx="xm + f" cy="0" :r="rUI / 2"></circle>
-                </g>
-                <!-- Double focal points -->
-                <g v-if="options.lensDoubleFocalPoints">
-                    <circle :cx="xm - 2 * f" cy="0" :r="rUI / 2"></circle>
-                    <circle :cx="xm + 2 * f" cy="0" :r="rUI / 2"></circle>
-                </g>
-            </WithBackground>
+            <Point :c="vec(xm - f, 0)"></Point>
+            <Point :c="vec(xm + f, 0)"></Point>
+            <!-- Double focal points -->
+            <g v-if="options.lensDoubleFocalPoints">
+                <Point :c="vec(xm - 2 * f, 0)"></Point>
+                <Point :c="vec(xm + 2 * f, 0)"></Point>
+            </g>
         </g>
 
         <!-- Aperture -->
diff --git a/src/SVG/Point.vue b/src/SVG/Point.vue
new file mode 100644
index 0000000..f743e71
--- /dev/null
+++ b/src/SVG/Point.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { rUI } from '@/globals';
+import type { Vec } from '@/math';
+import WithBackground from './WithBackground.vue';
+
+const props = defineProps<{
+    c: Vec,
+}>()
+
+</script>
+
+<template>
+    <WithBackground>
+        <g class="fill-white stroke-white normal">
+            <circle :cx="c.x" :cy="c.y" :r="rUI / 2"></circle>
+        </g>
+    </WithBackground>
+</template>
\ No newline at end of file
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index cabcb9f..698e324 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import { state, lights, lensGroups, sensor, style, apple, options, infR, rUI, aperture } from '../globals'
+import { state, lights, lensGroups, sensor, style, apple, options, infR, rUI, aperture, globalLensInfo } from '../globals'
 import * as h from '../handlers'
 import { Light } from '../type'
 import { vec } from '../math'
@@ -14,6 +14,7 @@ import WithBackground from './WithBackground.vue'
 import CircleUI from './CircleUI.vue'
 import Aperture from './Aperture.vue'
 import Body from './Body.vue'
+import Point from './Point.vue'
 
 // Reference to the svg element
 // This is needed for handles in handlers.ts
@@ -76,6 +77,10 @@ const strokeDashArray = computed(() => {
     <!-- Guidelines -->
     <Guideline v-if="options.lens && options.sensor && options.angleOfView"></Guideline>
 
+    <!-- Global focal point -->
+    <Point :c="vec(globalLensInfo.H, 0)"></Point>
+    <Point :c="vec(globalLensInfo.H + globalLensInfo.f, 0)"></Point>
+
     <!-- Items -->
     <g v-if="options.lens">
       <g v-for="(lensGroup, idx) in lensGroups">
diff --git a/src/globals.ts b/src/globals.ts
index ccc08dc..d1e83fc 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -350,4 +350,50 @@ export const body = computed(() => {
         front,
         back,
     }
+})
+
+export const calcLensInfo = (lenses: Lens[]) => {
+    const ll: { d: number, r: number, n: number, nn: number }[] = []
+    lenses.forEach((lens, idx) => {
+        // Left-side
+        {
+            const d = idx === 0 ? 0 : lens.x1 - lenses[idx - 1].x2
+            const r = lens.R1
+            const n = 1
+            const nn = lens.n
+            ll.push({ d, r, n, nn })
+        }
+        // Right-side
+        {
+            const d = lens.x2 - lens.x1
+            const r = lens.R2
+            const n = lens.n
+            const nn = 1
+            ll.push({ d, r, n, nn })
+        }
+    })
+
+    const ls: number[] = []
+    const lss: number[] = []
+    let f = 1
+    ll.forEach((l, i) => {
+        if (i === 0) {
+            //ls[i] = Infinity
+            lss[i] = 1 / (1 / l.r * (1 - l.n / l.nn))
+            f *= lss[i]
+        } else {
+            ls[i] = lss[i - 1] - ll[i].d
+            lss[i] = 1 / (l.n / l.nn / ls[i] + 1 / l.r * (1 - l.n / l.nn))
+            f *= lss[i] / ls[i]
+        }
+    })
+    let H = 0
+    if (lenses.length > 0) {
+        H = lenses[lenses.length - 1].x2 + lss[lss.length - 1] - f
+    }
+    return { f, H }
+}
+
+export const globalLensInfo = computed(() => {
+    return calcLensInfo(lensesSorted.value)
 })
\ No newline at end of file

From 62450e8391b7a1c59cf2812da8c60af8c1c416a3 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Thu, 27 Jun 2024 23:21:22 +0900
Subject: [PATCH 39/53] Optimization

---
 src/Canvas.vue | 20 ++++++++++++++++----
 src/math.ts    |  4 ++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 4c5feaa..6635233 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -87,10 +87,6 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     const r = lensRs.value[lensIdx]
     let innerLens = false
 
-    // Find image position of the light source
-    // TODO:
-    const image = fGaussian(f, xm - s.x, -s.y)
-
     //--------------------------------
     // Collision to lens surface (left-side)
     //--------------------------------
@@ -123,6 +119,12 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
 
         innerLens = true
       }
+
+      // Optimization
+      if (lensIdx === 0 && !pl.p && !pb.p) {
+        drawSegment(s, v, infR.value)
+        return
+      }
     }
 
     //--------------------------------
@@ -175,6 +177,10 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
         v = p.sub(s)
         s = drawSegment(s, v, v.length())
 
+        // Find image position of the light source
+        // TODO:
+        const image = fGaussian(f, xm - s0.x, -s0.y)
+
         // Refracted ray
         let theta = Math.atan2(image.y - s.y, image.x);
         if (image.x === Infinity) {
@@ -188,6 +194,12 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
         }
         v = vecRad(theta)
       }
+
+      // Optimization
+      if (lensIdx === 0 && !pl.p && !pb.p) {
+        drawSegment(s, v, infR.value)
+        return
+      }
     }
   }
 
diff --git a/src/math.ts b/src/math.ts
index 35cda38..da2808c 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -226,7 +226,7 @@ export const intersectionY = (s: Vec, v: Vec, x: number, yMin: number, yMax: num
     if (!isFinite(d) || d < 0) {
         return {p: null, d}
     } else {
-        const p = s.add(v.mul(d))
+        const p = s.add(v.inplaceMul(d))
         if (p.y < yMin || p.y > yMax) {
             return {p: null, d}
         } else {
@@ -241,7 +241,7 @@ export const intersectionX = (s: Vec, v: Vec, y: number, xMin: number, xMax: num
     if (!isFinite(d) || d < 0) {
         return {p: null, d}
     } else {
-        const p = s.add(v.mul(d))
+        const p = s.add(v.inplaceMul(d))
         if (p.x < xMin || p.x > xMax) {
             return {p: null, d}
         } else {

From 290c33415b8f7fc6b6ad7600346003a6d73aacf9 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Fri, 28 Jun 2024 00:07:41 +0900
Subject: [PATCH 40/53] White color

---
 src/Canvas.vue     | 30 ++++++++++++++++++++++++------
 src/Controller.vue |  7 +++++++
 src/SVG/SVG.vue    |  8 ++++++++
 src/globals.ts     |  3 +++
 src/handlers.ts    |  5 ++++-
 src/math.ts        | 28 +++++++++++++++++-----------
 src/type.ts        |  1 +
 7 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 6635233..2542556 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -2,7 +2,7 @@
 import { watch, onMounted, ref, computed } from 'vue'
 
 import { state, lights, lensGroups, sensor, sensorData, apple, options, style, infR, lensesSorted, lensRs, lensFs, body, lensFronts, aperture, lensBacks } from './globals'
-import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS, calcRMax, intersectionX, intersectionY } from './math'
+import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS, calcRMax, intersectionX, intersectionY, calcLensNWavelength } from './math'
 
 import { Light, type Lens, type LensGroup } from './type'
 
@@ -85,6 +85,7 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
     const xm = (lens.x1 + lens.x2) / 2
     const f = lensFs.value[lensIdx]
     const r = lensRs.value[lensIdx]
+    const n = options.value.wavelength ? calcLensNWavelength(lens.n, color) : lens.n
     let innerLens = false
 
     //--------------------------------
@@ -109,7 +110,7 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
 
         // Refraction (inner lens rays)
         const phi1 = crossAngle(Vec.sub(p, c).mul(lens.R1 > 0 ? 1 : -1), Vec.sub(s0, p));
-        const phi2 = Math.asin(Math.sin(phi1) / lens.n);
+        const phi2 = Math.asin(Math.sin(phi1) / n);
         const theta = Math.atan2(p.y - c.y, p.x - c.x) + Math.PI + phi2;
         if (lens.R1 > 0) {
           v = vecRad(theta)
@@ -148,7 +149,7 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
 
         // Refraction (inner lens rays)
         const phi1 = crossAngle(Vec.sub(p, c).mul(lens.R2 < 0 ? 1 : -1), Vec.sub(p, s));
-        const phi2 = Math.asin(Math.sin(phi1) * lens.n);
+        const phi2 = Math.asin(Math.sin(phi1) * n);
         const theta = Math.atan2(p.y - c.y, p.x - c.x) + phi2;
         if (lens.R2 > 0) {
           v = vecRad(theta + Math.PI)
@@ -252,12 +253,10 @@ const draw = () => {
 
   // Light sources
   for (const light of lights.value) {
-    ctx.strokeStyle = `hsl(${light.color}, 100%, 50%, ${style.value.rayIntensity})`
     ctx.lineWidth = style.value.rayWidth
-
     // Point light source
     if (light.type === Light.Point) {
-
+      ctx.strokeStyle = `hsl(${light.color}, 100%, 50%, ${style.value.rayIntensity})`
       // Draw 2^nRaysLog rays from light center
       const nRays = (1 << params.nRaysLog);
       for (let i = 0; i < nRays; i++) {
@@ -269,8 +268,27 @@ const draw = () => {
       }
     }
 
+    // White light source
+    if (light.type === Light.White) {
+      // Draw 2^nRaysLog rays from light center
+      const nRays = (1 << params.nRaysLog);
+      for (let i = 0; i < nRays; i++) {
+        // Initial position and direction
+        const s = light.c.copy()
+        const theta = 2 * Math.PI * i / nRays
+        const v = vecRad(theta)
+        const nColor = 20
+        for (let j=0;j<nColor;j++){
+          const color = 360 * j / nColor
+          ctx.strokeStyle = `hsl(${color}, 100%, 50%, ${style.value.rayIntensity})`
+          drawRay(s, v, color, sensorDataTmp)
+        }
+      }
+    }
+
     // Parallel light source
     if (light.type === Light.Parallel) {
+      ctx.strokeStyle = `hsl(${light.color}, 100%, 50%, ${style.value.rayIntensity})`
       const l = Vec.sub(light.t, light.s)
       const ln = l.normalize()
       const length = l.length()
diff --git a/src/Controller.vue b/src/Controller.vue
index 08aa89b..9b22a3a 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -50,6 +50,10 @@ const nRays = computed(() => {
                     <input type="radio" :value="Light.Point" v-model="state.newLightType">
                     Point
                 </label>
+                <label>
+                    <input type="radio" :value="Light.White" v-model="state.newLightType">
+                    White
+                </label>
                 <br>
                 <label>
                     <input type="radio" :value="Light.Parallel" v-model="state.newLightType">
@@ -197,6 +201,9 @@ const nRays = computed(() => {
                 <td>UI stroke width</td>
                 <td><input type="range" min="0" max="3" step="0.01" v-model.number="style.widthUI"></td>
             </tr>
+            <tr>
+                <td><label><input type="checkbox" v-model="options.wavelength"> Wavelength</label></td>
+            </tr>
         </template>
         <!-- Field -->
         <template v-if="options.advanced">
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 698e324..12a9ff5 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -111,6 +111,14 @@ const strokeDashArray = computed(() => {
           <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" :fill="`hsl(${light.color}, 100%, 50%, 0.5)`"></circle>
         </g>
       </g>
+      <g v-if="light.type === Light.White">
+        <g @mousedown="h.lightMoveStartHandler($event, idx)" @dblclick="h.deleteLight($event, idx)" class="grab">
+          <WithBackground>
+            <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" class="stroke-white normal fill-none"></circle>
+          </WithBackground>
+          <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" :fill="`hsl(0, 100%, 100%, 0.5)`"></circle>
+        </g>
+      </g>
       <g v-if="light.type === Light.Parallel">
         <LightParallel :light :idx class="grab"></LightParallel>
       </g>
diff --git a/src/globals.ts b/src/globals.ts
index d1e83fc..83346cd 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -26,12 +26,14 @@ export const state = ref(createInitialParams())
 export const lights0 = ():
     (
         { type: Light.Point, c: Vec, color: number } |
+        { type: Light.White, c: Vec } |
         { type: Light.Parallel, s: Vec, t: Vec, color: number }
     )[] => {
     return [
         // { type: Light.Point, c: vec(-200, 20), color: 0 }, // red
         // { type: Light.Point, c: vec(-160, 0), color: 120 }, // green
         // { type: Light.Point, c: vec(-120, -20), color: 240 }, // blue
+        // { type: Light.White, c: vec(-200, -18) }, // white
         { type: Light.Parallel, s: vec(-180, -30), t: vec(-180, 30), color: 120 }, // green
     ]
 }
@@ -210,6 +212,7 @@ export const options0 = () => {
         angleOfView: false,
         circleOfConfusion: false,
         apple: false,
+        wavelength: false,
     }
 }
 export const options = ref(options0())
diff --git a/src/handlers.ts b/src/handlers.ts
index 63de49d..81b5167 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -87,7 +87,7 @@ export const lightMoveStartHandler = (e: any, idx: number) => {
     newLights.push(light)
     lights.value = newLights
 
-    if (light.type === Light.Point) {
+    if (light.type === Light.Point || light.type === Light.White) {
         const m0 = getPositionOnSvg(e);
         const c0 = light.c.copy()
         moveHandler = (e_: any) => {
@@ -152,6 +152,9 @@ export const addLight = (e: any) => {
     if (state.value.newLightType === Light.Point) {
         lights.value.push({ type: Light.Point, c: m, color: state.value.newLightColor })
     }
+    if (state.value.newLightType === Light.White) {
+        lights.value.push({ type: Light.White, c: m })
+    }
     if (state.value.newLightType === Light.Parallel) {
         lights.value.push({ type: Light.Parallel, s: vec(m.x, m.y - 25), t: vec(m.x, m.y + 25), color: state.value.newLightColor })
     }
diff --git a/src/math.ts b/src/math.ts
index da2808c..171882b 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -224,13 +224,13 @@ export const intersectionY = (s: Vec, v: Vec, x: number, yMin: number, yMax: num
     v = v.normalize()
     const d = (x - s.x) / v.x
     if (!isFinite(d) || d < 0) {
-        return {p: null, d}
+        return { p: null, d }
     } else {
         const p = s.add(v.inplaceMul(d))
         if (p.y < yMin || p.y > yMax) {
-            return {p: null, d}
+            return { p: null, d }
         } else {
-            return {p, d}
+            return { p, d }
         }
     }
 }
@@ -239,13 +239,13 @@ export const intersectionX = (s: Vec, v: Vec, y: number, xMin: number, xMax: num
     v = v.normalize()
     const d = (y - s.y) / v.y
     if (!isFinite(d) || d < 0) {
-        return {p: null, d}
+        return { p: null, d }
     } else {
         const p = s.add(v.inplaceMul(d))
         if (p.x < xMin || p.x > xMax) {
-            return {p: null, d}
+            return { p: null, d }
         } else {
-            return {p, d}
+            return { p, d }
         }
     }
 }
@@ -262,7 +262,7 @@ export const getIntersectionLens = (s: Vec, v: Vec, cl: Vec, r: number /* lens d
     const c = Math.pow(s.x - cl.x, 2) + Math.pow(s.y - cl.y, 2) - absR * absR;
     const cond = b * b - 4 * a * c;
     if (cond < 0) {
-        return {p: null, d: 0}
+        return { p: null, d: 0 }
     }
     const d1 = (-b - Math.sqrt(cond)) / (2 * a);
     const d2 = (-b + Math.sqrt(cond)) / (2 * a);
@@ -271,15 +271,15 @@ export const getIntersectionLens = (s: Vec, v: Vec, cl: Vec, r: number /* lens d
     const ty = s.y + d * n.y;
     // TODO: Workarounds
     if (Math.abs(ty) > r || d < 0) {
-        return {p: null, d}
+        return { p: null, d }
     }
     if (R >= 0 && tx >= cl.x) {
-        return {p: null, d}
+        return { p: null, d }
     }
     if (R < 0 && tx < cl.x) {
-        return {p: null, d}
+        return { p: null, d }
     }
-    return {p: vec(tx, ty), d}
+    return { p: vec(tx, ty), d }
 }
 
 export const fGaussian = (f: number, px: number, py: number) => {
@@ -348,4 +348,10 @@ export const calcLensBack = (lens: Lens) => {
         return x - d
     }
 
+}
+
+// Just for demo
+export const calcLensNWavelength = (n: number, color: number) => {
+    const d = (color - (360 / 2)) * 0.0005 + 1.0
+    return d * n
 }
\ No newline at end of file
diff --git a/src/type.ts b/src/type.ts
index b0a5900..d3113e5 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -1,5 +1,6 @@
 // TODO: "Light" -> "LightType"
 export enum Light {
+    White,
     Point,
     Parallel
 }

From a3d9a53fd56f5a3e4067955d5fda3c19d8b6d7af Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Fri, 28 Jun 2024 03:23:14 +0900
Subject: [PATCH 41/53] White light better

---
 src/Canvas.vue            | 24 +++++-------------------
 src/Controller.vue        | 26 +++++++++++++++++---------
 src/SVG/LightParallel.vue | 10 +++++++++-
 src/SVG/SVG.vue           | 11 ++---------
 src/globals.ts            |  9 +++++----
 src/handlers.ts           | 18 +++++++++++-------
 src/math.ts               |  2 +-
 7 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 2542556..23587c0 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -256,7 +256,6 @@ const draw = () => {
     ctx.lineWidth = style.value.rayWidth
     // Point light source
     if (light.type === Light.Point) {
-      ctx.strokeStyle = `hsl(${light.color}, 100%, 50%, ${style.value.rayIntensity})`
       // Draw 2^nRaysLog rays from light center
       const nRays = (1 << params.nRaysLog);
       for (let i = 0; i < nRays; i++) {
@@ -264,22 +263,7 @@ const draw = () => {
         const s = light.c.copy()
         const theta = 2 * Math.PI * i / nRays
         const v = vecRad(theta)
-        drawRay(s, v, light.color, sensorDataTmp)
-      }
-    }
-
-    // White light source
-    if (light.type === Light.White) {
-      // Draw 2^nRaysLog rays from light center
-      const nRays = (1 << params.nRaysLog);
-      for (let i = 0; i < nRays; i++) {
-        // Initial position and direction
-        const s = light.c.copy()
-        const theta = 2 * Math.PI * i / nRays
-        const v = vecRad(theta)
-        const nColor = 20
-        for (let j=0;j<nColor;j++){
-          const color = 360 * j / nColor
+        for (let color of light.colors) {
           ctx.strokeStyle = `hsl(${color}, 100%, 50%, ${style.value.rayIntensity})`
           drawRay(s, v, color, sensorDataTmp)
         }
@@ -288,7 +272,6 @@ const draw = () => {
 
     // Parallel light source
     if (light.type === Light.Parallel) {
-      ctx.strokeStyle = `hsl(${light.color}, 100%, 50%, ${style.value.rayIntensity})`
       const l = Vec.sub(light.t, light.s)
       const ln = l.normalize()
       const length = l.length()
@@ -297,7 +280,10 @@ const draw = () => {
       for (let i = 0; i < nRays; i++) {
         const s = light.s.add(ln.mul(i / nRays * length))
         const v = l.rotate(-Math.PI / 2).normalize()
-        drawRay(s, v, light.color, sensorDataTmp)
+        for (let color of light.colors) {
+          ctx.strokeStyle = `hsl(${color}, 100%, 50%, ${style.value.rayIntensity})`
+          drawRay(s, v, color, sensorDataTmp)
+        }
       }
     }
   }
diff --git a/src/Controller.vue b/src/Controller.vue
index 9b22a3a..8a685b1 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -35,13 +35,25 @@ const nRays = computed(() => {
         <tr>
             <td>New light color</td>
             <td>
-                <input type="range" min="0" max="360" step="0.001" v-model="state.newLightColor">
+                <label>
+                    <input type="checkbox" v-model="state.newLightColorComposite">
+                    Composite
+                </label>
                 <br>
-                <button @click="state.newLightColor = 0">Red</button>
-                <button @click="state.newLightColor = 120">Green</button>
-                <button @click="state.newLightColor = 240">Blue</button>
+                <template v-if="!state.newLightColorComposite">
+                    <input type="range" min="0" max="360" step="0.001" v-model="state.newLightColor">
+                    <br>
+                    <button @click="state.newLightColor = 0">Red</button>
+                    <button @click="state.newLightColor = 120">Green</button>
+                    <button @click="state.newLightColor = 240">Blue</button>
+                </template>
+                <template v-if="state.newLightColorComposite">
+                    <input type="range" min="0" max="16" v-model="state.newLightColorCompositeN">
+                </template>
             </td>
-            <td :style="`background-color: hsl(${state.newLightColor}, 100%, 50%)`"></td>
+            <td v-if="!state.newLightColorComposite"
+                :style="`background-color: hsl(${state.newLightColor}, 100%, 50%)`"></td>
+            <td v-if="state.newLightColorComposite">{{ state.newLightColorCompositeN }}</td>
         </tr>
         <tr>
             <td>New light type</td>
@@ -50,10 +62,6 @@ const nRays = computed(() => {
                     <input type="radio" :value="Light.Point" v-model="state.newLightType">
                     Point
                 </label>
-                <label>
-                    <input type="radio" :value="Light.White" v-model="state.newLightType">
-                    White
-                </label>
                 <br>
                 <label>
                     <input type="radio" :value="Light.Parallel" v-model="state.newLightType">
diff --git a/src/SVG/LightParallel.vue b/src/SVG/LightParallel.vue
index 22c6823..67de0c0 100644
--- a/src/SVG/LightParallel.vue
+++ b/src/SVG/LightParallel.vue
@@ -51,12 +51,20 @@ const parallelLightNodeMoveStartHandler = (e: any, idx: number, node: Vec) => {
     }
 }
 
+const fill = computed(()=>{
+    if (props.light.colors.length > 1) {
+        return `hsl(0, 100%, 100%, 0.5)`
+    } else {
+        return `hsl(${props.light.colors[0]}, 100%, 50%, 0.5)`
+    }
+})
+
 </script>
 
 <template>
     <g>
         <g @mousedown="h.lightMoveStartHandler($event, idx)" @dblclick="h.deleteLight($event, idx)">
-            <polygon :points :fill="`hsl(${light.color}, 100%, 50%, 0.5)`"></polygon>
+            <polygon :points :fill></polygon>
             <WithBackground>
                 <polygon :points class="stroke-white normal fill-none"></polygon>
             </WithBackground>
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 12a9ff5..bfd891f 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -108,15 +108,8 @@ const strokeDashArray = computed(() => {
           <WithBackground>
             <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" class="stroke-white normal fill-none"></circle>
           </WithBackground>
-          <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" :fill="`hsl(${light.color}, 100%, 50%, 0.5)`"></circle>
-        </g>
-      </g>
-      <g v-if="light.type === Light.White">
-        <g @mousedown="h.lightMoveStartHandler($event, idx)" @dblclick="h.deleteLight($event, idx)" class="grab">
-          <WithBackground>
-            <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" class="stroke-white normal fill-none"></circle>
-          </WithBackground>
-          <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" :fill="`hsl(0, 100%, 100%, 0.5)`"></circle>
+          <circle :cx="light.c.x" :cy="light.c.y" :r="rUI"
+            :fill="`hsl(${light.colors[0]}, 100%, ${light.colors.length > 0 ? 100 : 50}%, 0.5)`"></circle>
         </g>
       </g>
       <g v-if="light.type === Light.Parallel">
diff --git a/src/globals.ts b/src/globals.ts
index 83346cd..d3b93f2 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -14,6 +14,8 @@ export const createInitialParams = () => {
         scale: 4,
         nRaysLog: 10,
         newLightColor: 120,
+        newLightColorComposite: false,
+        newLightColorCompositeN: 3,
         newLightType: Light.Point,
     }
 }
@@ -25,16 +27,15 @@ export const state = ref(createInitialParams())
 
 export const lights0 = ():
     (
-        { type: Light.Point, c: Vec, color: number } |
-        { type: Light.White, c: Vec } |
-        { type: Light.Parallel, s: Vec, t: Vec, color: number }
+        { type: Light.Point, c: Vec, colors: number[] } |
+        { type: Light.Parallel, s: Vec, t: Vec, colors: number[] }
     )[] => {
     return [
         // { type: Light.Point, c: vec(-200, 20), color: 0 }, // red
         // { type: Light.Point, c: vec(-160, 0), color: 120 }, // green
         // { type: Light.Point, c: vec(-120, -20), color: 240 }, // blue
         // { type: Light.White, c: vec(-200, -18) }, // white
-        { type: Light.Parallel, s: vec(-180, -30), t: vec(-180, 30), color: 120 }, // green
+        { type: Light.Parallel, s: vec(-180, -30), t: vec(-180, 30), colors: [120] }, // green
     ]
 }
 export const lights = ref(lights0())
diff --git a/src/handlers.ts b/src/handlers.ts
index 81b5167..54ccf79 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -42,7 +42,6 @@ export const setMoveHandler = (h: any) => {
     moveHandler = h
 }
 export const svgMoveStartHandler = (e: any) => {
-    e.preventDefault();
     const m0 = getPositionOnSvg(e);
     const c0 = state.value.c.copy()
     releaseAllLenses()
@@ -87,7 +86,7 @@ export const lightMoveStartHandler = (e: any, idx: number) => {
     newLights.push(light)
     lights.value = newLights
 
-    if (light.type === Light.Point || light.type === Light.White) {
+    if (light.type === Light.Point) {
         const m0 = getPositionOnSvg(e);
         const c0 = light.c.copy()
         moveHandler = (e_: any) => {
@@ -149,14 +148,19 @@ export const sensorSizeChangeStartHandler = (e: any) => {
 export const addLight = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m = getPositionOnSvgApp(e);
-    if (state.value.newLightType === Light.Point) {
-        lights.value.push({ type: Light.Point, c: m, color: state.value.newLightColor })
+    let colors = [state.value.newLightColor]
+    if (state.value.newLightColorComposite) {
+        const n = state.value.newLightColorCompositeN
+        colors = []
+        for (let i = 0; i < n; i++) {
+            colors.push(360 * i / n)
+        }
     }
-    if (state.value.newLightType === Light.White) {
-        lights.value.push({ type: Light.White, c: m })
+    if (state.value.newLightType === Light.Point) {
+        lights.value.push({ type: Light.Point, c: m, colors })
     }
     if (state.value.newLightType === Light.Parallel) {
-        lights.value.push({ type: Light.Parallel, s: vec(m.x, m.y - 25), t: vec(m.x, m.y + 25), color: state.value.newLightColor })
+        lights.value.push({ type: Light.Parallel, s: vec(m.x, m.y - 25), t: vec(m.x, m.y + 25), colors })
     }
 }
 export const deleteLight = (e: any, idx: number) => {
diff --git a/src/math.ts b/src/math.ts
index 171882b..888b1b8 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -352,6 +352,6 @@ export const calcLensBack = (lens: Lens) => {
 
 // Just for demo
 export const calcLensNWavelength = (n: number, color: number) => {
-    const d = (color - (360 / 2)) * 0.0005 + 1.0
+    const d = (color - (360 / 2)) * 0.0002 + 1.0
     return d * n
 }
\ No newline at end of file

From 9abfcd82195704faa79535ab6ce1376f856dddab Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Fri, 28 Jun 2024 03:31:57 +0900
Subject: [PATCH 42/53] Create sensor component and some update

---
 src/SVG/SVG.vue    | 14 +++----------
 src/SVG/Sensor.vue | 52 ++++++++++++++++++++++++++++++++++++++++++++++
 src/handlers.ts    | 27 ------------------------
 3 files changed, 55 insertions(+), 38 deletions(-)
 create mode 100644 src/SVG/Sensor.vue

diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index bfd891f..cc018d5 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -15,6 +15,7 @@ import CircleUI from './CircleUI.vue'
 import Aperture from './Aperture.vue'
 import Body from './Body.vue'
 import Point from './Point.vue'
+import Sensor from './Sensor.vue'
 
 // Reference to the svg element
 // This is needed for handles in handlers.ts
@@ -60,7 +61,7 @@ const strokeDashArray = computed(() => {
 <template>
   <svg id="main-svg" class="move" ref="svg" :view-box.camel="svgViewBox" :width="state.width" :height="state.height"
     @mousedown="h.svgMoveStartHandler" @mousemove="h.svgMoveHandler" @mouseup="h.svgMoveEndHandler"
-    @mouseleave="h.svgMoveEndHandler" @wheel="h.svgScaleHandler" @dblclick="h.addLight">
+    @wheel="h.svgScaleHandler" @dblclick="h.addLight">
 
     <!-- Optical axis -->
     <g v-if="options.opticalAxis">
@@ -118,16 +119,7 @@ const strokeDashArray = computed(() => {
     </g>
 
     <!-- Sensor -->
-    <g v-if="options.sensor">
-      <WithBackground>
-        <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="stroke-white normal" />
-      </WithBackground>
-      <!-- dummies for ui -->
-      <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="ui-stroke transparent grab"
-        @mousedown="h.sensorMoveStartHandler" />
-      <CircleUI :c="vec(sensor.x, -sensor.r)" class="vertical-resize" @mousedown="h.sensorSizeChangeStartHandler">
-      </CircleUI>
-    </g>
+    <Sensor v-if="options.sensor"></Sensor>
   </svg>
 </template>
 
diff --git a/src/SVG/Sensor.vue b/src/SVG/Sensor.vue
new file mode 100644
index 0000000..a4f1b5a
--- /dev/null
+++ b/src/SVG/Sensor.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { aperture, maxLensX, sensor } from '@/globals';
+import * as h from '../handlers'
+import { vec } from '@/math';
+import WithBackground from './WithBackground.vue';
+import CircleUI from './CircleUI.vue';
+
+const move = (e: any) => {
+    h.preventDefaultAndStopPropagation(e)
+    const m0 = h.getPositionOnSvg(e);
+    const cx0 = sensor.value.x;
+    h.setMoveHandler((e_: any) => {
+        const d = h.getPositionDiffOnSvgApp(e_, m0)
+        const maxX = Math.max(maxLensX.value, aperture.value.x)
+        if (cx0 + d.x < maxX) {
+            sensor.value.x = maxX
+            return
+        }
+        sensor.value.x = cx0 + d.x
+    })
+}
+
+const resize = (e: any) => {
+    h.preventDefaultAndStopPropagation(e)
+    const m0 = h.getPositionOnSvg(e);
+    const r0 = sensor.value.r;
+    h.setMoveHandler((e_: any) => {
+        const d = h.getPositionDiffOnSvgApp(e_, m0)
+        if (r0 - d.y < 0.1) {
+            sensor.value.r = 0.1;
+        } else {
+            sensor.value.r = r0 - d.y;
+        }
+    })
+}
+
+</script>
+
+<template>
+    <g>
+        <g @mousedown="move">
+            <WithBackground :ui="true">
+                <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="stroke-white normal" />
+            </WithBackground>
+        </g>
+        <!-- dummies for ui -->
+        <!-- <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="ui-stroke transparent grab"
+        @mousedown="move" /> -->
+        <CircleUI :c="vec(sensor.x, -sensor.r)" class="vertical-resize" @mousedown="resize">
+        </CircleUI>
+    </g>
+</template>
\ No newline at end of file
diff --git a/src/handlers.ts b/src/handlers.ts
index 54ccf79..42920cf 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -118,33 +118,6 @@ export const lightMoveStartHandler = (e: any, idx: number) => {
         }
     }
 }
-export const sensorMoveStartHandler = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    const m0 = getPositionOnSvg(e);
-    const cx0 = sensor.value.x;
-    moveHandler = (e_: any) => {
-        const d = getPositionDiffOnSvgApp(e_, m0)
-        const maxX = Math.max(maxLensX.value, aperture.value.x)
-        if (cx0 + d.x < maxX) {
-            sensor.value.x = maxX
-            return
-        }
-        sensor.value.x = cx0 + d.x
-    }
-}
-export const sensorSizeChangeStartHandler = (e: any) => {
-    preventDefaultAndStopPropagation(e)
-    const m0 = getPositionOnSvg(e);
-    const r0 = sensor.value.r;
-    moveHandler = (e_: any) => {
-        const d = getPositionDiffOnSvgApp(e_, m0)
-        if (r0 - d.y < 0.1) {
-            sensor.value.r = 0.1;
-        } else {
-            sensor.value.r = r0 - d.y;
-        }
-    }
-}
 export const addLight = (e: any) => {
     preventDefaultAndStopPropagation(e)
     const m = getPositionOnSvgApp(e);

From 0c8baf29c84b1514870bf843f9d950cb114ee31e Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Fri, 28 Jun 2024 04:02:42 +0900
Subject: [PATCH 43/53] Introduce MoveUI

---
 src/SVG/MoveUI.vue | 20 ++++++++++++++++++++
 src/SVG/Sensor.vue | 33 +++++++++++++--------------------
 src/handlers.ts    | 15 +++++++++++++--
 3 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 src/SVG/MoveUI.vue

diff --git a/src/SVG/MoveUI.vue b/src/SVG/MoveUI.vue
new file mode 100644
index 0000000..d1b4721
--- /dev/null
+++ b/src/SVG/MoveUI.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { getPositionOnSvg, preventDefaultAndStopPropagation, setMoveHandlerWithM0 } from '@/handlers';
+import type { Vec } from '@/math';
+
+const props = defineProps<{
+    handlerCreator: ()=>((e: any, d: Vec)=>void)
+}>()
+
+const moveStart = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m0 = getPositionOnSvg(e);
+    setMoveHandlerWithM0(props.handlerCreator(), m0)
+}
+</script>
+
+<template>
+    <g @mousedown="moveStart">
+        <slot></slot>
+    </g>
+</template>
\ No newline at end of file
diff --git a/src/SVG/Sensor.vue b/src/SVG/Sensor.vue
index a4f1b5a..1490690 100644
--- a/src/SVG/Sensor.vue
+++ b/src/SVG/Sensor.vue
@@ -1,52 +1,45 @@
 <script setup lang="ts">
 import { aperture, maxLensX, sensor } from '@/globals';
 import * as h from '../handlers'
-import { vec } from '@/math';
+import { Vec, vec } from '@/math';
 import WithBackground from './WithBackground.vue';
 import CircleUI from './CircleUI.vue';
+import MoveUI from './MoveUI.vue';
 
-const move = (e: any) => {
-    h.preventDefaultAndStopPropagation(e)
-    const m0 = h.getPositionOnSvg(e);
+const move = () => {
     const cx0 = sensor.value.x;
-    h.setMoveHandler((e_: any) => {
-        const d = h.getPositionDiffOnSvgApp(e_, m0)
+    return (e: any, d: Vec) => {
         const maxX = Math.max(maxLensX.value, aperture.value.x)
         if (cx0 + d.x < maxX) {
             sensor.value.x = maxX
             return
         }
         sensor.value.x = cx0 + d.x
-    })
+    }
 }
 
-const resize = (e: any) => {
-    h.preventDefaultAndStopPropagation(e)
-    const m0 = h.getPositionOnSvg(e);
+const resize = () => {
     const r0 = sensor.value.r;
-    h.setMoveHandler((e_: any) => {
-        const d = h.getPositionDiffOnSvgApp(e_, m0)
+    return (e: any, d: Vec) => {
         if (r0 - d.y < 0.1) {
             sensor.value.r = 0.1;
         } else {
             sensor.value.r = r0 - d.y;
         }
-    })
+    }
 }
 
 </script>
 
 <template>
     <g>
-        <g @mousedown="move">
+        <MoveUI :handler-creator="move" class="grab">
             <WithBackground :ui="true">
                 <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="stroke-white normal" />
             </WithBackground>
-        </g>
-        <!-- dummies for ui -->
-        <!-- <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="ui-stroke transparent grab"
-        @mousedown="move" /> -->
-        <CircleUI :c="vec(sensor.x, -sensor.r)" class="vertical-resize" @mousedown="resize">
-        </CircleUI>
+        </MoveUI>
+        <MoveUI :handler-creator="resize" class="vertical-resize">
+            <CircleUI :c="vec(sensor.x, -sensor.r)"></CircleUI>
+        </MoveUI>
     </g>
 </template>
\ No newline at end of file
diff --git a/src/handlers.ts b/src/handlers.ts
index 42920cf..e3c5a37 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -38,9 +38,15 @@ export const preventDefaultAndStopPropagation = (e: any) => {
 
 // Event handlers
 let moveHandler: any = null;
+let moveHandlerWithM0: any = null;
+let m0: Vec
 export const setMoveHandler = (h: any) => {
     moveHandler = h
 }
+export const setMoveHandlerWithM0 = (h: any, m: Vec) => {
+    moveHandlerWithM0 = h
+    m0 = m
+}
 export const svgMoveStartHandler = (e: any) => {
     const m0 = getPositionOnSvg(e);
     const c0 = state.value.c.copy()
@@ -62,10 +68,15 @@ export const svgMoveHandler = (e: any) => {
         preventDefaultAndStopPropagation(e)
         moveHandler(e)
     }
+    if (moveHandlerWithM0 !== null){
+        preventDefaultAndStopPropagation(e)
+        const d = getPositionDiffOnSvgApp(e, m0)
+        moveHandlerWithM0(e, d)
+    }
 }
 export const svgMoveEndHandler = () => {
-    moveHandler = null;
-    // tpCache = [];
+    moveHandler = null
+    moveHandlerWithM0 = null
 }
 export const svgScaleHandler = (e: any) => {
     preventDefaultAndStopPropagation(e)

From d9cea0821eeb08491eae8acf9e17b8efb31086e7 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Fri, 28 Jun 2024 04:18:26 +0900
Subject: [PATCH 44/53] Test MoveUI

---
 src/SVG/Aperture.vue | 58 +++++++++++++++++++++-----------------------
 src/SVG/MoveUI.vue   |  2 +-
 src/SVG/Sensor.vue   |  1 -
 3 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/SVG/Aperture.vue b/src/SVG/Aperture.vue
index 8bd0c0e..d0633ec 100644
--- a/src/SVG/Aperture.vue
+++ b/src/SVG/Aperture.vue
@@ -3,29 +3,25 @@ import { aperture, body, maxLightX, rUI, sensor, style } from '@/globals';
 import WithBackground from './WithBackground.vue';
 import * as h from '../handlers'
 import CircleUI from './CircleUI.vue';
-import { vec } from '@/math';
+import { Vec, vec } from '@/math';
+import MoveUI from './MoveUI.vue';
 
-const resize = (e: any, sgn: number) => {
-    h.preventDefaultAndStopPropagation(e)
-    // Last touched light is always front
-    const m0 = h.getPositionOnSvg(e)
-    const r0 = aperture.value.r
-    h.setMoveHandler((e_: any) => {
-        const d = h.getPositionDiffOnSvgApp(e_, m0)
-        let rn = r0 + sgn * d.y
-        if (rn < 0) {
-            rn = 0
+const resize = (sgn: number) => {
+    return () => {
+        const r0 = aperture.value.r
+        return (e: any, d: Vec) => {
+            let rn = r0 + sgn * d.y
+            if (rn < 0) {
+                rn = 0
+            }
+            aperture.value.r = rn
         }
-        aperture.value.r = rn
-    })
+    }
 }
 
-const move = (e: any) => {
-    h.preventDefaultAndStopPropagation(e)
-    const m0 = h.getPositionOnSvg(e)
+const move = () => {
     const x0 = aperture.value.x
-    h.setMoveHandler((e_: any) => {
-        const d = h.getPositionDiffOnSvgApp(e_, m0)
+    return (e: any, d: Vec) => {
         let xn = x0 + d.x
         if (xn < maxLightX.value) {
             xn = maxLightX.value
@@ -33,28 +29,28 @@ const move = (e: any) => {
             xn = sensor.value.x
         }
         aperture.value.x = xn
-    })
+    }
 }
 
 </script>
 
 <template>
-    <WithBackground>
-        <g v-if="body.r" class="stroke-white normal">
-            <!-- Top -->
-            <line :x1="aperture.x" :y1="-body.r - style.bodyPadding" :x2="aperture.x" :y2="-aperture.r"></line>
-            <!-- Bottom -->
-            <line :x1="aperture.x" :y1="body.r + style.bodyPadding" :x2="aperture.x" :y2="aperture.r"></line>
-            <g class="ui-stroke transparent grab" @mousedown="move">
+    <MoveUI :handler-creator="move" class="grab">
+        <WithBackground :ui="true">
+            <g v-if="body.r" class="stroke-white normal">
                 <!-- Top -->
                 <line :x1="aperture.x" :y1="-body.r - style.bodyPadding" :x2="aperture.x" :y2="-aperture.r"></line>
                 <!-- Bottom -->
                 <line :x1="aperture.x" :y1="body.r + style.bodyPadding" :x2="aperture.x" :y2="aperture.r"></line>
             </g>
-            <CircleUI :c="vec(aperture.x, -aperture.r)" class="vertical-resize" @mousedown="resize($event, -1)">
-            </CircleUI>
-            <CircleUI :c="vec(aperture.x, aperture.r)" class="vertical-resize" @mousedown="resize($event, +1)">
-            </CircleUI>
-        </g>
+        </WithBackground>
+    </MoveUI>
+    <WithBackground>
+        <MoveUI :handler-creator="resize(-1)" class="vertical-resize">
+            <CircleUI :c="vec(aperture.x, -aperture.r)"></CircleUI>
+        </MoveUI>
+        <MoveUI :handler-creator="resize(+1)" class="vertical-resize">
+            <CircleUI :c="vec(aperture.x, aperture.r)"></CircleUI>
+        </MoveUI>
     </WithBackground>
 </template>
\ No newline at end of file
diff --git a/src/SVG/MoveUI.vue b/src/SVG/MoveUI.vue
index d1b4721..7203303 100644
--- a/src/SVG/MoveUI.vue
+++ b/src/SVG/MoveUI.vue
@@ -3,7 +3,7 @@ import { getPositionOnSvg, preventDefaultAndStopPropagation, setMoveHandlerWithM
 import type { Vec } from '@/math';
 
 const props = defineProps<{
-    handlerCreator: ()=>((e: any, d: Vec)=>void)
+    handlerCreator: (...params: any[])=>((e: any, d: Vec)=>void)
 }>()
 
 const moveStart = (e: any) => {
diff --git a/src/SVG/Sensor.vue b/src/SVG/Sensor.vue
index 1490690..31ebfae 100644
--- a/src/SVG/Sensor.vue
+++ b/src/SVG/Sensor.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { aperture, maxLensX, sensor } from '@/globals';
-import * as h from '../handlers'
 import { Vec, vec } from '@/math';
 import WithBackground from './WithBackground.vue';
 import CircleUI from './CircleUI.vue';

From 58ff3e5bd43952710b4bf91148091c55d69687a6 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 1 Jul 2024 02:46:46 +0900
Subject: [PATCH 45/53] Depth of field for general sensor

---
 src/Canvas.vue        |  27 ++++---
 src/Controller.vue    |  21 ++++--
 src/Preview.vue       |  12 ++-
 src/SVG/Aperture.vue  |   5 +-
 src/SVG/Body.vue      |  26 +++++--
 src/SVG/Guideline.vue | 165 +++++++++++++++++++++++++++---------------
 src/SVG/Lens.vue      |  10 ++-
 src/SVG/LensGroup.vue |   7 +-
 src/SVG/SVG.vue       |   2 +-
 src/SVG/Sensor.vue    |  36 +++++----
 src/globals.ts        |  26 +++++--
 src/math.ts           |   8 +-
 12 files changed, 226 insertions(+), 119 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 23587c0..8e093c9 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -46,16 +46,23 @@ const intersectionBody = (s: Vec, v: Vec) => {
       const lensR = lensRs.value[idx]
       const front = lensFronts.value[idx]
       const back = lensBacks.value[idx]
+      const xm = (lens.x1 + lens.x2) / 2
       // Lens to body
       if (options.value.body && body.value.r) {
-        ps.push(intersectionY(s, v, front, -body.value.r, -lensR))
-        ps.push(intersectionY(s, v, front, lensR, body.value.r))
+        if (options.value.lensIdeal) {
+          ps.push(intersectionY(s, v, xm, -body.value.r, -lensR))
+          ps.push(intersectionY(s, v, xm, lensR, body.value.r))
+        } else {
+          ps.push(intersectionY(s, v, front, -body.value.r, -lensR))
+          ps.push(intersectionY(s, v, front, lensR, body.value.r))
+        }
       }
       // Upper / Bottom
-      ps.push(intersectionX(s, v, -lensR, front, back))
-      ps.push(intersectionX(s, v, lensR, front, back))
+      if (!options.value.lensIdeal) {
+        ps.push(intersectionX(s, v, -lensR, front, back))
+        ps.push(intersectionX(s, v, lensR, front, back))
+      }
       // Aperture
-      const xm = (lens.x1 + lens.x2) / 2
       ps.push(intersectionY(s, v, xm, -lensR, -lensR * lens.aperture))
       ps.push(intersectionY(s, v, xm, lensR * lens.aperture, lensR))
     })
@@ -208,18 +215,18 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
   // Collision to sensor
   //--------------------------------
   if (options.value.sensor) {
-    const ps = intersectionY(s, v, sensor.value.x, -sensor.value.r, sensor.value.r)
+    const ps = intersectionSS(s, s.add(v.mul(infR.value)), sensor.value.s, sensor.value.t)
     const pb = intersectionBody(s, v)
-    if ((pb.p && ps.p && pb.d < ps.d) || (!ps.p && pb.p)) {
+    if ((pb.p && ps && pb.d < (ps.sub(s).length())) || (!ps && pb.p)) {
       v = pb.p.sub(s)
       drawSegment(s, v, v.length())
       return
     }
-    if (ps.p) {
-      const p = ps.p
+    if (ps) {
+      const p = ps
       v = p.sub(s)
       drawSegment(s, v, v.length())
-      sensorDataTmp.push({ y: p.y, color })
+      sensorDataTmp.push({ y: p.sub(sensor.value.s).length(), color })
       return
     }
   }
diff --git a/src/Controller.vue b/src/Controller.vue
index 8a685b1..6c86a30 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -4,11 +4,20 @@ import { computed } from 'vue'
 import { state, lensGroups, defaultConvexLens, defaultConcaveLens, sensor, appleProps, options, style, globalLensInfo } from './globals'
 import { humanReadable } from './utils';
 import { Light } from "./type"
+import { vec } from './math';
 
 const nRays = computed(() => {
     return 1 << state.value.nRaysLog
 })
 
+const createSensor = (d: number) => {
+    const xm = (sensor.value.s.x + sensor.value.t.x) / 2
+    sensor.value.s.x = xm
+    sensor.value.s.y = -d / 2
+    sensor.value.t.x = xm
+    sensor.value.t.y = d / 2
+}
+
 </script>
 
 <template>
@@ -167,7 +176,7 @@ const nRays = computed(() => {
                 <tr>
                     <td>Diameter</td>
                     <td></td>
-                    <td>{{ humanReadable(sensor.r * 2) }}<br></td>
+                    <td>{{ humanReadable(sensor.t.sub(sensor.s).length()) }}<br></td>
                 </tr>
             </template>
         </template>
@@ -270,15 +279,15 @@ const nRays = computed(() => {
             <tr>
                 <td>Sensor height</td>
                 <td>
-                    <button @click="sensor.r = 24 / 2">Full frame</button>
+                    <button @click="createSensor(24)">Full frame</button>
                     <br>
-                    <button @click="sensor.r = 15.6 / 2">APS-C</button>
+                    <button @click="createSensor(15.6)">APS-C</button>
                     <br>
-                    <button @click="sensor.r = 14.9 / 2">APS-C (Canon)</button>
+                    <button @click="createSensor(14.9)">APS-C (Canon)</button>
                     <br>
-                    <button @click="sensor.r = 13 / 2">Four thirds</button>
+                    <button @click="createSensor(13)">Four thirds</button>
                     <br>
-                    <button @click="sensor.r = 8.8 / 2">1"</button>
+                    <button @click="createSensor(8.8)">1"</button>
                 </td>
                 <td></td>
             </tr>
diff --git a/src/Preview.vue b/src/Preview.vue
index ecbddb7..a313a82 100644
--- a/src/Preview.vue
+++ b/src/Preview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, onMounted, ref } from 'vue'
+import { watch, onMounted, ref, computed } from 'vue'
 
 import { state, sensor, sensorData, options, style, memoryCanvasCtx } from './globals'
 
@@ -15,9 +15,13 @@ if (!ctx) {
   throw new Error()
 }
 
+const d = computed(() => {
+  return sensor.value.t.sub(sensor.value.s).length()
+})
+
 const draw = () => {
   const height = state.value.height
-  const scale = height / (sensor.value.r * 2)
+  const scale = height / d.value
   ctx.reset()
   ctx.transform(scale * 2, 0, 0, scale, 100 * 0.5, height * 0.5);
   ctx.globalCompositeOperation = 'lighten';
@@ -26,7 +30,7 @@ const draw = () => {
   for (const p of sensorData.value) {
     ctx.beginPath()
     ctx.fillStyle = `hsl(${p.color}, 100%, 50%, ${style.value.rayIntensity})`;
-    ctx.rect(-10, p.y - style.value.rayWidth / 2, 20, style.value.rayWidth)
+    ctx.rect(-10, (p.y - d.value / 2) - style.value.rayWidth / 2, 20, style.value.rayWidth)
     ctx.fill()
     ctx.stroke();
   }
@@ -35,7 +39,7 @@ const draw = () => {
   if (options.value.circleOfConfusion) {
     ctx.beginPath();
     ctx.fillStyle = 'white'
-    const width = 0.01 * sensor.value.r
+    const width = 0.005 * d.value
     ctx.rect(-width / 2, -sensor.value.circleOfConfusion / 2, width, sensor.value.circleOfConfusion);
     ctx.fill()
     ctx.stroke();
diff --git a/src/SVG/Aperture.vue b/src/SVG/Aperture.vue
index d0633ec..2857abe 100644
--- a/src/SVG/Aperture.vue
+++ b/src/SVG/Aperture.vue
@@ -23,10 +23,11 @@ const move = () => {
     const x0 = aperture.value.x
     return (e: any, d: Vec) => {
         let xn = x0 + d.x
+        const sensorMinX = Math.min(sensor.value.s.x, sensor.value.t.x)
         if (xn < maxLightX.value) {
             xn = maxLightX.value
-        } else if (xn > sensor.value.x - rUI.value) {
-            xn = sensor.value.x
+        } else if (xn > sensorMinX - rUI.value) {
+            xn = sensorMinX
         }
         aperture.value.x = xn
     }
diff --git a/src/SVG/Body.vue b/src/SVG/Body.vue
index d3b9844..946fa0b 100644
--- a/src/SVG/Body.vue
+++ b/src/SVG/Body.vue
@@ -8,12 +8,13 @@ const move = (e: any) => {
     const m0 = h.getPositionOnSvg(e)
     const x10 = lensGroups.value.map((lensGroup) => lensGroup.lenses.map((lens) => lens.x1))
     const x20 = lensGroups.value.map((lensGroup) => lensGroup.lenses.map((lens) => lens.x2))
-    const sensorX0 = sensor.value.x
+    const sensorS0 = sensor.value.s.copy()
+    const sensorT0 = sensor.value.t.copy()
     const apertureX0 = aperture.value.x
     h.setMoveHandler((e_: any) => {
         const d = h.getPositionDiffOnSvgApp(e_, m0)
-        let minX = Math.min(sensorX0, apertureX0)
-        x10.forEach((g) =>[
+        let minX = Math.min(sensorS0.x, sensorT0.x, apertureX0)
+        x10.forEach((g) => [
             g.forEach((x1) => {
                 minX = Math.min(minX, x1)
             })
@@ -29,7 +30,8 @@ const move = (e: any) => {
                 lens.x2 = x20[i][j] + d.x
             })
         })
-        sensor.value.x = sensorX0 + d.x
+        sensor.value.s.x = sensorS0.x + d.x
+        sensor.value.t.x = sensorT0.x + d.x
         aperture.value.x = apertureX0 + d.x
     })
 }
@@ -39,7 +41,7 @@ const move = (e: any) => {
 <template>
     <g @mousedown="move" class="grab">
         <WithBackground :ui="true">
-            <g v-if="body.front && body.back && body.r" class="stroke-white thicker">
+            <g v-if="body.front !== null && body.back !== null && body.r !== null" class="stroke-white thicker">
                 <!-- Outline -->
                 <line :x1="body.front" :y1="-body.r" :x2="body.back" :y2="-body.r"></line>
                 <line :x1="body.front" :y1="body.r" :x2="body.back" :y2="body.r"></line>
@@ -48,8 +50,18 @@ const move = (e: any) => {
                 <!-- Lenses -->
                 <g v-if="options.lens">
                     <g v-for="(lens, idx) of lensesSorted">
-                        <line :x1="lensFronts[idx]" :y1="-body.r" :x2="lensFronts[idx]" :y2="-lensRs[idx]"></line>
-                        <line :x1="lensFronts[idx]" :y1="body.r" :x2="lensFronts[idx]" :y2="lensRs[idx]"></line>
+                        <g v-if="options.lensIdeal">
+                            <line :x1="(lens.x1 + lens.x2) / 2" :y1="-body.r" :x2="(lens.x1 + lens.x2) / 2"
+                                :y2="-lensRs[idx]">
+                            </line>
+                            <line :x1="(lens.x1 + lens.x2) / 2" :y1="body.r" :x2="(lens.x1 + lens.x2) / 2"
+                                :y2="lensRs[idx]">
+                            </line>
+                        </g>
+                        <g v-else>
+                            <line :x1="lensFronts[idx]" :y1="-body.r" :x2="lensFronts[idx]" :y2="-lensRs[idx]"></line>
+                            <line :x1="lensFronts[idx]" :y1="body.r" :x2="lensFronts[idx]" :y2="lensRs[idx]"></line>
+                        </g>
                     </g>
                 </g>
             </g>
diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index 1838e1d..f963487 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -5,6 +5,7 @@ import { lensGroups, sensor, options, infR } from '../globals'
 import { vec, fGaussian, calcLensF } from '../math'
 
 import WithBackground from './WithBackground.vue'
+import Point from './Point.vue';
 
 const lens = computed(() => {
     return lensGroups.value[0].lenses[0]
@@ -27,67 +28,115 @@ const re = computed(() => {
     }
 })
 
+const sensorTop = computed(() => {
+    if (sensor.value.t.y < sensor.value.s.y) {
+        return sensor.value.t
+    } else {
+        return sensor.value.s
+    }
+})
+
+const sensorBottom = computed(() => {
+    if (sensor.value.t.y < sensor.value.s.y) {
+        return sensor.value.s
+    } else {
+        return sensor.value.t
+    }
+})
+
+const sensorMiddle = computed(() => {
+    return sensor.value.t.add(sensor.value.s).div(2)
+})
+
 // Focal plane
 const focal = computed(() => {
-    const bx = sensor.value.x - x.value;
-    const by = sensor.value.r
+    // const bx = sensor.value.x - x.value;
+    // const by = sensor.value.r
 
-    const a = fGaussian(f.value, bx, by)
+    const s = sensorTop.value
+    const t = sensorBottom.value
+    const ss = fGaussian(f.value, s.x - x.value, s.y)
+    const tt = fGaussian(f.value, t.x - x.value, t.y)
 
-    return { x: x.value - a.x, d: a.y }
+    return { s: vec(x.value - ss.x, -ss.y), t: vec(x.value - tt.x, -tt.y) }
 })
 
 // Angle of view
 const aov = computed(() => {
     const lensTop = vec(x.value, -re.value)
+    const lensBottom = vec(x.value, re.value)
 
-    const focalPlaneTop = vec(focal.value.x, -focal.value.d)
-    const focalPlaneBottom = vec(focal.value.x, focal.value.d)
+    const focalPlaneTop = focal.value.t
+    const focalPlaneBottom = focal.value.s
 
     // Lens to focal plane
-    let middleOuter = focalPlaneTop.sub(lensTop)
-    let middleInner = focalPlaneBottom.sub(lensTop)
+    let middleOuterTop = focalPlaneTop.sub(lensTop)
+    let middleOuterBottom = focalPlaneBottom.sub(lensBottom)
+    let middleInnerTop = focalPlaneBottom.sub(lensTop)
+    let middleInnerBottom = focalPlaneTop.sub(lensBottom)
     // For over infinity modification
-    if (x.value + f.value > sensor.value.x) {
-        middleOuter = middleOuter.minus().normalize().mul(infR.value)
-        middleInner = middleInner.minus().normalize().mul(infR.value)
+    if (x.value + f.value > sensorMiddle.value.x) {
+        // middleOuter = middleOuter.minus().normalize().mul(infR.value)
+        // middleInner = middleInner.minus().normalize().mul(infR.value)
     }
-    if (x.value + f.value === sensor.value.x) {
-        middleOuter = vec(x.value - sensor.value.x, -sensor.value.r).normalize().mul(infR.value)
-        middleInner = vec(x.value - sensor.value.x, sensor.value.r).normalize().mul(infR.value)
+    if (x.value + f.value === sensorMiddle.value.x) {
+        // middleOuter = vec(x.value - sensor.value.x, -sensor.value.r).normalize().mul(infR.value)
+        // middleInner = vec(x.value - sensor.value.x, sensor.value.r).normalize().mul(infR.value)
     }
 
     // Focal plane to infinity
-    const inner = middleOuter.normalize().mul(infR.value)
-    const outer = middleInner.normalize().mul(infR.value)
+    const innerTop = middleOuterTop.normalize().mul(infR.value)
+    const innerBottom = middleOuterBottom.normalize().mul(infR.value)
+    const outerTop = middleInnerTop.normalize().mul(infR.value)
+    const outerBottom = middleInnerBottom.normalize().mul(infR.value)
 
-    return { middleInner, middleOuter, inner, outer }
+    return { middleInnerTop, middleInnerBottom, middleOuterTop, middleOuterBottom, innerTop, innerBottom, outerTop, outerBottom }
 })
 
 // Depth of field
 const dof = computed(() => {
     const r = re.value
-    const delta = sensor.value.circleOfConfusion
-
-    const bx = sensor.value.x - x.value
-    const by = sensor.value.r // Unused
-    const a = fGaussian(f.value, bx, by)
-
-    // Image space
-    const bFront = bx / (1 + delta / (2 * r)) // Lens side
-    const bBack = bx / (1 - delta / (2 * r))
-
-    // Object space
-    const aFront = 1 / (1 / f.value - 1 / bFront)
-    const aBack = 1 / (1 / f.value - 1 / bBack) // Lens side
-
-    // Radius of planes
-    const c = a.x * (re.value / (re.value + focal.value.d))
-    const dFront = re.value / c * (aFront - c)
-    const dBack = focal.value.d * (aBack / a.x) + re.value * (1 - aBack / a.x) // Lens side
-
-    const inner = { x: aBack, d: dBack } // Lens side
-    const outer = { x: aFront, d: dFront }
+    const st = sensor.value.t.sub(sensor.value.s)
+    const sensorSize = st.length()
+    const c = sensor.value.circleOfConfusion
+    const v = st.normalize()
+    const s = sensor.value.s.add(vec(-x.value, 0))
+
+    let inner = ""
+    let outer = ""
+    const d = (sensorSize + c) / 100
+    for (let t = -c; t < sensorSize + d / 2; t += d) {
+        const a = s.add(v.mul(t))
+        const b = s.add(v.mul(t + c))
+
+        const px = 2 * r * a.x * b.x / (a.x * b.y - b.x * a.y + (a.x + b.x) * r)
+        const py = (a.y - r) / a.x * px + r
+
+        const p = fGaussian(f.value, px, py)
+        p.x = x.value - p.x
+        p.y = -p.y
+        if (inner === "") {
+            inner += `M ${p.x} ${p.y} `
+        } else {
+            inner += `L ${p.x} ${p.y} `
+        }
+    }
+    for (let t = -c; t < sensorSize + d / 2; t += d) {
+        const a = s.add(v.mul(t + c))
+        const b = s.add(v.mul(t))
+
+        const px = 2 * r * a.x * b.x / (a.x * b.y - b.x * a.y + (a.x + b.x) * r)
+        const py = (a.y - r) / a.x * px + r
+
+        const p = fGaussian(f.value, px, py)
+        p.x = x.value - p.x
+        p.y = -p.y
+        if (outer === "") {
+            outer += `M ${p.x} ${p.y} `
+        } else {
+            outer += `L ${p.x} ${p.y} `
+        }
+    }
     return { inner, outer }
 })
 
@@ -98,41 +147,43 @@ const dof = computed(() => {
         <g class="stroke-white">
             <!-- Inside camera -->
             <g class="thick">
-                <line :x1="sensor.x" :y1="sensor.r" :x2="x" :y2="re"></line>
-                <line :x1="sensor.x" :y1="-sensor.r" :x2="x" :y2="-re"></line>
+                <line :x1="sensorTop.x" :y1="sensorTop.y" :x2="x" :y2="-re"></line>
+                <line :x1="sensorBottom.x" :y1="sensorBottom.y" :x2="x" :y2="re"></line>
             </g>
-            <g v-if="x !== sensor.x">
+            <g v-if="x !== sensorMiddle.x">
                 <!-- Lens to focal plane (outer) -->
                 <g class="thick">
-                    <line :x1="x" :y1="-re" :x2="x + aov.middleOuter.x" :y2="-re + aov.middleOuter.y"></line>
-                    <line :x1="x" :y1="re" :x2="x + aov.middleOuter.x" :y2="re - aov.middleOuter.y"></line>
+                    <line :x1="x" :y1="-re" :x2="x + aov.middleOuterTop.x" :y2="-re + aov.middleOuterTop.y"></line>
+                    <line :x1="x" :y1="re" :x2="x + aov.middleOuterBottom.x" :y2="re + aov.middleOuterBottom.y"></line>
                 </g>
                 <!-- Lens to focal plane (inner) -->
                 <g class="thicker">
-                    <line :x1="x" :y1="-re" :x2="x + aov.middleInner.x" :y2="-re + aov.middleInner.y"></line>
-                    <line :x1="x" :y1="re" :x2="x + aov.middleInner.x" :y2="re - aov.middleInner.y"></line>
+                    <line :x1="x" :y1="-re" :x2="x + aov.middleInnerTop.x" :y2="-re + aov.middleInnerTop.y"></line>
+                    <line :x1="x" :y1="re" :x2="x + aov.middleInnerBottom.x" :y2="re + aov.middleInnerBottom.y"></line>
                 </g>
             </g>
             <!-- Non over infinity -->
-            <g v-if="x + f < sensor.x">
+            <g v-if="x + f < sensorMiddle.x">
                 <!-- Focal plane -->
-                <line :x1="focal.x" :y1="-focal.d" :x2="focal.x" :y2="focal.d" class="thick"></line>
+                <line :x1="focal.s.x" :y1="focal.s.y" :x2="focal.t.x" :y2="focal.t.y" class="thick"></line>
                 <!-- Focal plane to inf (outer) -->
                 <g class="thick">
-                    <line :x1="focal.x" :y1="focal.d" :x2="focal.x + aov.outer.x" :y2="focal.d + aov.outer.y"></line>
-                    <line :x1="focal.x" :y1="-focal.d" :x2="focal.x + aov.outer.x" :y2="-focal.d - aov.outer.y"></line>
+                    <line :x1="focal.s.x" :y1="focal.s.y" :x2="focal.s.x + aov.outerTop.x"
+                        :y2="focal.s.y + aov.outerTop.y"></line>
+                    <line :x1="focal.t.x" :y1="focal.t.y" :x2="focal.t.x + aov.outerBottom.x"
+                        :y2="focal.t.y + aov.outerBottom.y"></line>
                 </g>
                 <!-- Focal plane to inf (inner) -->
                 <g class="thicker">
-                    <line :x1="focal.x" :y1="focal.d" :x2="focal.x + aov.inner.x" :y2="focal.d - aov.inner.y"></line>
-                    <line :x1="focal.x" :y1="-focal.d" :x2="focal.x + aov.inner.x" :y2="-focal.d + aov.inner.y"></line>
+                    <line :x1="focal.t.x" :y1="focal.t.y" :x2="focal.t.x + aov.innerTop.x"
+                        :y2="focal.t.y + aov.innerTop.y"></line>
+                    <line :x1="focal.s.x" :y1="focal.s.y" :x2="focal.s.x + aov.innerBottom.x"
+                        :y2="focal.s.y + aov.innerBottom.y"></line>
                 </g>
-                <!-- Depth of field -->
-                <g v-if="options.circleOfConfusion && options.depthOfField">
-                    <g class="thick">
-                        <line :x1="x - dof.inner.x" :y1="-dof.inner.d" :x2="x - dof.inner.x" :y2="dof.inner.d"></line>
-                        <line :x1="x - dof.outer.x" :y1="-dof.outer.d" :x2="x - dof.outer.x" :y2="dof.outer.d"></line>
-                    </g>
+                <!-- Depth of focus -->
+                <g class="thicker">
+                    <path :d="dof.inner"></path>
+                    <path :d="dof.outer"></path>
                 </g>
             </g>
         </g>
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index d459e52..d5ac21a 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -99,10 +99,11 @@ const x2MoveStartHandler = (e: any) => {
     const x20 = lens.x2
     setMoveHandler((e_: any) => {
         const d = getPositionDiffOnSvgApp(e_, m0)
+        const sensorMinX = Math.min(sensor.value.s.x, sensor.value.t.x)
         if (x20 + d.x < props.lens.x1) {
             lens.x2 = props.lens.x1
-        } else if (x20 + d.x > sensor.value.x) {
-            lens.x2 = sensor.value.x
+        } else if (x20 + d.x > sensorMinX) {
+            lens.x2 = sensorMinX
         } else {
             lens.x2 = x20 + d.x
         }
@@ -155,8 +156,9 @@ const r2MoveStartHandler = (e: any) => {
         if (x2n < props.lens.x1) {
             x2n = props.lens.x1
         }
-        if (x2n > sensor.value.x) {
-            x2n = sensor.value.x
+        const sensorMinX = Math.min(sensor.value.s.x, sensor.value.t.x)
+        if (x2n > sensorMinX) {
+            x2n = sensorMinX
         }
         if (x2n - rightX0 > r0) {
             lens.R2 = -r0
diff --git a/src/SVG/LensGroup.vue b/src/SVG/LensGroup.vue
index 84194cd..6cc4117 100644
--- a/src/SVG/LensGroup.vue
+++ b/src/SVG/LensGroup.vue
@@ -33,13 +33,14 @@ const moveStartHandler = (e: any) => {
                 continue
             }
             for (let j = 0; j < lensGroup.lenses.length; j++) {
+        const sensorMinX = Math.min(sensor.value.s.x, sensor.value.t.x)
                 if (x10s[i][j] + d.x < maxLightX.value) {
                     if (Math.abs(maxLightX.value - x10s[i][j]) < Math.abs(d.x)) {
                         d.x = maxLightX.value - x10s[i][j]
                     }
-                } else if (x20s[i][j] + d.x > sensor.value.x) {
-                    if (Math.abs(sensor.value.x - x20s[i][j]) < Math.abs(d.x)) {
-                        d.x = sensor.value.x - x20s[i][j]
+                } else if (x20s[i][j] + d.x > sensorMinX) {
+                    if (Math.abs(sensorMinX - x20s[i][j]) < Math.abs(d.x)) {
+                        d.x = sensorMinX - x20s[i][j]
                     }
                 }
             }
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index cc018d5..71d2fcd 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -110,7 +110,7 @@ const strokeDashArray = computed(() => {
             <circle :cx="light.c.x" :cy="light.c.y" :r="rUI" class="stroke-white normal fill-none"></circle>
           </WithBackground>
           <circle :cx="light.c.x" :cy="light.c.y" :r="rUI"
-            :fill="`hsl(${light.colors[0]}, 100%, ${light.colors.length > 0 ? 100 : 50}%, 0.5)`"></circle>
+            :fill="`hsl(${light.colors[0]}, 100%, ${light.colors.length > 0 ? 50 : 100}%, 0.5)`"></circle>
         </g>
       </g>
       <g v-if="light.type === Light.Parallel">
diff --git a/src/SVG/Sensor.vue b/src/SVG/Sensor.vue
index 31ebfae..6c3423d 100644
--- a/src/SVG/Sensor.vue
+++ b/src/SVG/Sensor.vue
@@ -6,25 +6,33 @@ import CircleUI from './CircleUI.vue';
 import MoveUI from './MoveUI.vue';
 
 const move = () => {
-    const cx0 = sensor.value.x;
+    const s0 = sensor.value.s.copy()
+    const t0 = sensor.value.t.copy()
     return (e: any, d: Vec) => {
-        const maxX = Math.max(maxLensX.value, aperture.value.x)
-        if (cx0 + d.x < maxX) {
-            sensor.value.x = maxX
-            return
+        const sn = s0.add(d)
+        const tn = t0.add(d)
+        if (e.shiftKey) {
+            const ym = (s0.y + t0.y) / 2
+            sn.y = s0.y - ym
+            tn.y = t0.y - ym
         }
-        sensor.value.x = cx0 + d.x
+        sensor.value.s = sn
+        sensor.value.t = tn
     }
 }
 
 const resize = () => {
-    const r0 = sensor.value.r;
+    const s0 = sensor.value.s.copy()
+    const t0 = sensor.value.t.copy()
+    const m0 = s0.add(t0).div(2)
     return (e: any, d: Vec) => {
-        if (r0 - d.y < 0.1) {
-            sensor.value.r = 0.1;
-        } else {
-            sensor.value.r = r0 - d.y;
+        const sn = s0.add(d)
+        if (e.shiftKey) {
+            sn.x = m0.x
         }
+        const tn = m0.add(sn.sub(m0).minus())
+        sensor.value.s = sn
+        sensor.value.t = tn
     }
 }
 
@@ -34,11 +42,11 @@ const resize = () => {
     <g>
         <MoveUI :handler-creator="move" class="grab">
             <WithBackground :ui="true">
-                <line :x1="sensor.x" :y1="-sensor.r" :x2="sensor.x" :y2="sensor.r" class="stroke-white normal" />
+                <line :x1="sensor.s.x" :y1="sensor.s.y" :x2="sensor.t.x" :y2="sensor.t.y" class="stroke-white normal" />
             </WithBackground>
         </MoveUI>
-        <MoveUI :handler-creator="resize" class="vertical-resize">
-            <CircleUI :c="vec(sensor.x, -sensor.r)"></CircleUI>
+        <MoveUI :handler-creator="resize" class="grab">
+            <CircleUI :c="sensor.s"></CircleUI>
         </MoveUI>
     </g>
 </template>
\ No newline at end of file
diff --git a/src/globals.ts b/src/globals.ts
index d3b93f2..6823975 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -112,8 +112,8 @@ export const aperture = ref(aperture0())
 
 export const sensor0 = () => {
     return {
-        x: 80,
-        r: 24 / 2, // Full frame
+        s: vec(80, -12),
+        t: vec(80, 12),
         circleOfConfusion: 1,
     }
 }
@@ -214,6 +214,7 @@ export const options0 = () => {
         circleOfConfusion: false,
         apple: false,
         wavelength: false,
+        sensorFreeMove: true,
     }
 }
 export const options = ref(options0())
@@ -246,7 +247,7 @@ export const infR = computed(() => {
     let screen = Math.sqrt(w * w + h * h);
 
     // light to center max distance
-    const c = state.value.c;
+    const c = vec((sensor.value.s.x + sensor.value.t.x) / 2, 0)
     let distanceMax = 0;
     for (const light of lights.value) {
         if (light.type === Light.Point) {
@@ -318,7 +319,8 @@ export const body = computed(() => {
         rs.push(aperture.value.r)
     }
     if (options.value.sensor) {
-        rs.push(sensor.value.r + padding)
+        const r = Math.max(Math.abs(sensor.value.s.y), Math.abs(sensor.value.t.y))
+        rs.push(r + padding)
     }
 
     let r = null
@@ -328,10 +330,19 @@ export const body = computed(() => {
 
     let front = null
     if (lensExist) {
+        const xm = (lensesSorted.value[0].x1 + lensesSorted.value[0].x2) / 2
         if (options.value.aperture) {
-            front = Math.min(aperture.value.x, calcLensFront(lensesSorted.value[0]))
+            if (options.value.lensIdeal) {
+                front = Math.min(aperture.value.x, xm)
+            } else {
+                front = Math.min(aperture.value.x, calcLensFront(lensesSorted.value[0]))
+            }
         } else {
-            front = calcLensFront(lensesSorted.value[0])
+            if (options.value.lensIdeal) {
+                front = xm
+            } else {
+                front = calcLensFront(lensesSorted.value[0])
+            }
         }
     } else {
         if (options.value.aperture) {
@@ -340,7 +351,8 @@ export const body = computed(() => {
     }
     let back = null
     if (options.value.sensor) {
-        back = sensor.value.x + padding
+        const maxX = Math.max(sensor.value.s.x, sensor.value.t.x)
+        back = maxX + padding
     } else if (lensExist) {
         if (options.value.aperture) {
             back = Math.max(...lensFronts.value, aperture.value.x)
diff --git a/src/math.ts b/src/math.ts
index 888b1b8..93f7a66 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -282,10 +282,10 @@ export const getIntersectionLens = (s: Vec, v: Vec, cl: Vec, r: number /* lens d
     return { p: vec(tx, ty), d }
 }
 
-export const fGaussian = (f: number, px: number, py: number) => {
-    const qx = f * px / (px - f)
-    const qy = py * (qx / px)
-    return vec(qx, qy)
+export const fGaussian = (f: number, ax: number, ay: number) => {
+    const bx = f * ax / (ax - f)
+    const by = ay * (bx / ax)
+    return vec(bx, by)
 }
 
 export const calcLensF = (lens: Lens) => {

From 8028e7a4848edb79c81a4db054f7a58c0fc22834 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 1 Jul 2024 05:24:27 +0900
Subject: [PATCH 46/53] Fix fGaussian sign

---
 src/Canvas.vue        |  2 +-
 src/SVG/Guideline.vue | 15 +++++++--------
 src/SVG/SVG.vue       |  6 ++++--
 src/math.ts           |  6 +++---
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 8e093c9..ab3c188 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -187,7 +187,7 @@ const drawRay = (s: Vec, v: Vec, color: number, sensorDataTmp: any[]) => {
 
         // Find image position of the light source
         // TODO:
-        const image = fGaussian(f, xm - s0.x, -s0.y)
+        const image = fGaussian(f, vec(s0.x - xm, s0.y))
 
         // Refracted ray
         let theta = Math.atan2(image.y - s.y, image.x);
diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index f963487..e3f35ef 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -5,7 +5,6 @@ import { lensGroups, sensor, options, infR } from '../globals'
 import { vec, fGaussian, calcLensF } from '../math'
 
 import WithBackground from './WithBackground.vue'
-import Point from './Point.vue';
 
 const lens = computed(() => {
     return lensGroups.value[0].lenses[0]
@@ -55,10 +54,10 @@ const focal = computed(() => {
 
     const s = sensorTop.value
     const t = sensorBottom.value
-    const ss = fGaussian(f.value, s.x - x.value, s.y)
-    const tt = fGaussian(f.value, t.x - x.value, t.y)
+    const ss = fGaussian(f.value, vec(x.value - s.x, s.y))
+    const tt = fGaussian(f.value, vec(x.value - t.x, t.y))
 
-    return { s: vec(x.value - ss.x, -ss.y), t: vec(x.value - tt.x, -tt.y) }
+    return { s: vec(x.value - ss.x, ss.y), t: vec(x.value - tt.x, tt.y) }
 })
 
 // Angle of view
@@ -112,9 +111,9 @@ const dof = computed(() => {
         const px = 2 * r * a.x * b.x / (a.x * b.y - b.x * a.y + (a.x + b.x) * r)
         const py = (a.y - r) / a.x * px + r
 
-        const p = fGaussian(f.value, px, py)
+        const p = fGaussian(f.value, vec(-px, py))
         p.x = x.value - p.x
-        p.y = -p.y
+        p.y = p.y
         if (inner === "") {
             inner += `M ${p.x} ${p.y} `
         } else {
@@ -128,9 +127,9 @@ const dof = computed(() => {
         const px = 2 * r * a.x * b.x / (a.x * b.y - b.x * a.y + (a.x + b.x) * r)
         const py = (a.y - r) / a.x * px + r
 
-        const p = fGaussian(f.value, px, py)
+        const p = fGaussian(f.value, vec(-px, py))
         p.x = x.value - p.x
-        p.y = -p.y
+        p.y = p.y
         if (outer === "") {
             outer += `M ${p.x} ${p.y} `
         } else {
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 71d2fcd..e991177 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -79,8 +79,10 @@ const strokeDashArray = computed(() => {
     <Guideline v-if="options.lens && options.sensor && options.angleOfView"></Guideline>
 
     <!-- Global focal point -->
-    <Point :c="vec(globalLensInfo.H, 0)"></Point>
-    <Point :c="vec(globalLensInfo.H + globalLensInfo.f, 0)"></Point>
+    <g v-if="options.lensFocalPoints">
+      <Point :c="vec(globalLensInfo.H, 0)"></Point>
+      <Point :c="vec(globalLensInfo.H + globalLensInfo.f, 0)"></Point>
+    </g>
 
     <!-- Items -->
     <g v-if="options.lens">
diff --git a/src/math.ts b/src/math.ts
index 93f7a66..c4be1b0 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -282,9 +282,9 @@ export const getIntersectionLens = (s: Vec, v: Vec, cl: Vec, r: number /* lens d
     return { p: vec(tx, ty), d }
 }
 
-export const fGaussian = (f: number, ax: number, ay: number) => {
-    const bx = f * ax / (ax - f)
-    const by = ay * (bx / ax)
+export const fGaussian = (f: number, a: Vec) => {
+    const bx = f * a.x / (a.x + f)
+    const by = a.y * (bx / a.x)
     return vec(bx, by)
 }
 

From c03ac02459cbb7be89b08dc0fbb3d9d905408728 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 1 Jul 2024 06:49:59 +0900
Subject: [PATCH 47/53] Global re

---
 src/SVG/Lens.vue |  8 ++++----
 src/SVG/SVG.vue  |  6 ++++--
 src/globals.ts   | 34 +++++++++++++++++++++++++++++++++-
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index d5ac21a..b26c7e8 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -267,12 +267,12 @@ const apertureSizeChangeStartHandler = (e: any) => {
 
         <!-- Focal points -->
         <g v-if="options.lensFocalPoints">
-            <Point :c="vec(xm - f, 0)"></Point>
-            <Point :c="vec(xm + f, 0)"></Point>
+            <!-- <Point :c="vec(xm - f, 0)"></Point> -->
+            <!-- <Point :c="vec(xm + f, 0)"></Point> -->
             <!-- Double focal points -->
             <g v-if="options.lensDoubleFocalPoints">
-                <Point :c="vec(xm - 2 * f, 0)"></Point>
-                <Point :c="vec(xm + 2 * f, 0)"></Point>
+                <!-- <Point :c="vec(xm - 2 * f, 0)"></Point> -->
+                <!-- <Point :c="vec(xm + 2 * f, 0)"></Point> -->
             </g>
         </g>
 
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index e991177..e700aa3 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import { state, lights, lensGroups, sensor, style, apple, options, infR, rUI, aperture, globalLensInfo } from '../globals'
+import { state, lights, lensGroups, sensor, style, apple, options, infR, rUI, aperture, globalLensInfo, globalLensRe } from '../globals'
 import * as h from '../handlers'
 import { Light } from '../type'
 import { vec } from '../math'
@@ -80,7 +80,9 @@ const strokeDashArray = computed(() => {
 
     <!-- Global focal point -->
     <g v-if="options.lensFocalPoints">
-      <Point :c="vec(globalLensInfo.H, 0)"></Point>
+      <WithBackground>
+        <line :x1="globalLensInfo.H" :y1="-globalLensRe" :x2="globalLensInfo.H" :y2="globalLensRe" class="stroke-white thick"></line>
+      </WithBackground>
       <Point :c="vec(globalLensInfo.H + globalLensInfo.f, 0)"></Point>
     </g>
 
diff --git a/src/globals.ts b/src/globals.ts
index 6823975..4fc1385 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -1,5 +1,5 @@
 import { ref, computed } from "vue"
-import { Vec, calcLensFront, vec, calcLensF, calcLensR, calcLensBack } from "./math"
+import { Vec, calcLensFront, vec, calcLensF, calcLensR, calcLensBack, fGaussian } from "./math"
 import { type Lens, type LensGroup, Light } from "./type"
 
 //================================
@@ -410,6 +410,38 @@ export const calcLensInfo = (lenses: Lens[]) => {
     return { f, H }
 }
 
+const globalLensInfos = computed(() => {
+    return lensesSorted.value.map((lens) => {
+        return calcLensInfo([lens])
+    })
+})
+
+export const globalLensRe = computed(() => {
+    let re = 1
+    const res: number[] = []
+    const ps: number[] = []
+    const xs: number[] = []
+    lensesSorted.value.forEach((lens, idx) => {
+        const f = globalLensInfos.value[idx].f
+        const r = calcLensR(lens) * lens.aperture
+        // xs.push(globalLensInfos.value[idx].H)
+        xs.push((lens.x1 + lens.x2) / 2)
+        if (idx === 0) {
+            ps.push(xs[idx] + f)
+            res.push(r)
+            re = 1
+        } else {
+            ps.push(xs[idx] + fGaussian(f, vec(ps[idx - 1] - xs[idx], 0)).x)
+            res.push((ps[idx - 1] - xs[idx]) / (ps[idx - 1] - xs[idx - 1]) * res[idx - 1])
+            if (r < Math.abs(res[idx])) {
+                re *= r / Math.abs(res[idx])
+                res[idx] = r
+            }
+        }
+    })
+    return Math.abs(res[0]) * re
+})
+
 export const globalLensInfo = computed(() => {
     return calcLensInfo(lensesSorted.value)
 })
\ No newline at end of file

From e9c6c8acd947ccf69ac686e2933a27a3ca98aa75 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 1 Jul 2024 07:53:29 +0900
Subject: [PATCH 48/53] Better focal point position for ideal lens and some
 refactoring

---
 src/Canvas.vue        |  6 +++---
 src/SVG/Guideline.vue | 22 +++++-----------------
 src/SVG/Lens.vue      |  6 +++---
 src/SVG/LensGroup.vue |  1 -
 src/SVG/SVG.vue       | 17 ++++++++---------
 src/SVG/Sensor.vue    |  4 ++--
 src/globals.ts        | 29 +++++++++++++++++++++--------
 src/math.ts           | 16 ++++++++--------
 8 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index ab3c188..ffd77c6 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { watch, onMounted, ref, computed } from 'vue'
+import { watch, onMounted, ref} from 'vue'
 
 import { state, lights, lensGroups, sensor, sensorData, apple, options, style, infR, lensesSorted, lensRs, lensFs, body, lensFronts, aperture, lensBacks } from './globals'
-import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, calcLensF, intersectionSS, calcRMax, intersectionX, intersectionY, calcLensNWavelength } from './math'
+import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, intersectionSS, calcRMax, intersectionX, intersectionY, calcLensNWavelength } from './math'
 
-import { Light, type Lens, type LensGroup } from './type'
+import { Light } from './type'
 
 // Reference to the canvas
 const canvas = ref()
diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index e3f35ef..c4ed7f2 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -1,30 +1,22 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { lensGroups, sensor, options, infR } from '../globals'
+import { lensGroups, sensor, options, infR, globalLensInfo, globalLensRe } from '../globals'
 
-import { vec, fGaussian, calcLensF } from '../math'
+import { vec, fGaussian } from '../math'
 
 import WithBackground from './WithBackground.vue'
 
-const lens = computed(() => {
-    return lensGroups.value[0].lenses[0]
-})
-
 const x = computed(() => {
-    return (lens.value.x1 + lens.value.x2) / 2
+    return globalLensRe.value.H
 })
 
 const f = computed(() => {
-    return calcLensF(lens.value)
+    return globalLensInfo.value.f
 })
 
 // Effective lens radius
 const re = computed(() => {
-    if (options.value.aperture) {
-        return lens.value.r * lens.value.aperture;
-    } else {
-        return lens.value.r;
-    }
+    return globalLensRe.value.re
 })
 
 const sensorTop = computed(() => {
@@ -49,14 +41,10 @@ const sensorMiddle = computed(() => {
 
 // Focal plane
 const focal = computed(() => {
-    // const bx = sensor.value.x - x.value;
-    // const by = sensor.value.r
-
     const s = sensorTop.value
     const t = sensorBottom.value
     const ss = fGaussian(f.value, vec(x.value - s.x, s.y))
     const tt = fGaussian(f.value, vec(x.value - t.x, t.y))
-
     return { s: vec(x.value - ss.x, ss.y), t: vec(x.value - tt.x, tt.y) }
 })
 
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index b26c7e8..c7ec96b 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { lensGroups, releaseAllLenses, sensor, options, style, rUI, maxLightX } from '../globals'
-import { vec, calcLensF, calcRMax, calcLensFront, calcLensBack } from '../math'
+import { sensor, options,  maxLightX, calcLensInfo } from '../globals'
+import { vec, calcRMax, calcLensFront, calcLensBack } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import type { Lens } from '../type'
 import WithBackground from './WithBackground.vue'
@@ -14,7 +14,7 @@ const props = defineProps<{
 }>()
 
 const f = computed(() => {
-    return calcLensF(props.lens)
+    return calcLensInfo([props.lens]).f
 })
 
 const H = computed(() => {
diff --git a/src/SVG/LensGroup.vue b/src/SVG/LensGroup.vue
index 6cc4117..7924692 100644
--- a/src/SVG/LensGroup.vue
+++ b/src/SVG/LensGroup.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { lensGroups, releaseAllLenses, sensor, options, style, rUI, maxLightX } from '../globals'
-import { calcLensF, calcRMax } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import { type LensGroup } from '../type'
 
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index e700aa3..2b7bbad 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import { state, lights, lensGroups, sensor, style, apple, options, infR, rUI, aperture, globalLensInfo, globalLensRe } from '../globals'
+import { state, lights, lensGroups, style, apple, options, infR, rUI, globalLensInfo, globalLensRe, lensExist } from '../globals'
 import * as h from '../handlers'
 import { Light } from '../type'
 import { vec } from '../math'
@@ -11,7 +11,6 @@ import Guideline from './Guideline.vue'
 import LightParallel from './LightParallel.vue'
 import LensGroup from './LensGroup.vue'
 import WithBackground from './WithBackground.vue'
-import CircleUI from './CircleUI.vue'
 import Aperture from './Aperture.vue'
 import Body from './Body.vue'
 import Point from './Point.vue'
@@ -51,10 +50,10 @@ const strokeWidth = computed(() => {
   }
 })
 
-const strokeDashArray = computed(() => {
-  const scale = 1 / state.value.scale
-  return 4 * scale;
-})
+// const strokeDashArray = computed(() => {
+//   const scale = 1 / state.value.scale
+//   return 4 * scale;
+// })
 
 </script>
 
@@ -79,11 +78,11 @@ const strokeDashArray = computed(() => {
     <Guideline v-if="options.lens && options.sensor && options.angleOfView"></Guideline>
 
     <!-- Global focal point -->
-    <g v-if="options.lensFocalPoints">
+    <g v-if="options.lensFocalPoints && lensExist">
       <WithBackground>
-        <line :x1="globalLensInfo.H" :y1="-globalLensRe" :x2="globalLensInfo.H" :y2="globalLensRe" class="stroke-white thick"></line>
+        <line :x1="globalLensRe.H" :y1="-globalLensRe.re" :x2="globalLensRe.H" :y2="globalLensRe.re" class="stroke-white thick"></line>
       </WithBackground>
-      <Point :c="vec(globalLensInfo.H + globalLensInfo.f, 0)"></Point>
+      <Point :c="vec(globalLensRe.H + globalLensInfo.f, 0)"></Point>
     </g>
 
     <!-- Items -->
diff --git a/src/SVG/Sensor.vue b/src/SVG/Sensor.vue
index 6c3423d..1a3f97a 100644
--- a/src/SVG/Sensor.vue
+++ b/src/SVG/Sensor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { aperture, maxLensX, sensor } from '@/globals';
-import { Vec, vec } from '@/math';
+import { sensor } from '@/globals';
+import { Vec } from '@/math';
 import WithBackground from './WithBackground.vue';
 import CircleUI from './CircleUI.vue';
 import MoveUI from './MoveUI.vue';
diff --git a/src/globals.ts b/src/globals.ts
index 4fc1385..73b6cb5 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -1,5 +1,5 @@
 import { ref, computed } from "vue"
-import { Vec, calcLensFront, vec, calcLensF, calcLensR, calcLensBack, fGaussian } from "./math"
+import { Vec, calcLensFront, vec, calcLensR, calcLensBack, fGaussian } from "./math"
 import { type Lens, type LensGroup, Light } from "./type"
 
 //================================
@@ -69,7 +69,7 @@ export const lensesSorted = computed(() => {
 })
 
 export const lensFs = computed(() => {
-    return lensesSorted.value.map((lens) => calcLensF(lens))
+    return lensesSorted.value.map((lens) => calcLensInfo([lens]).f)
 })
 
 export const lensRs = computed(() => {
@@ -373,7 +373,10 @@ export const calcLensInfo = (lenses: Lens[]) => {
     lenses.forEach((lens, idx) => {
         // Left-side
         {
-            const d = idx === 0 ? 0 : lens.x1 - lenses[idx - 1].x2
+            let d = idx === 0 ? 0 : lens.x1 - lenses[idx - 1].x2
+            if (options.value.lensIdeal && idx !== 0) {
+                d = (lens.x1 + lens.x2) / 2 - (lenses[idx - 1].x1 + lenses[idx - 1].x2) / 2
+            }
             const r = lens.R1
             const n = 1
             const nn = lens.n
@@ -381,7 +384,10 @@ export const calcLensInfo = (lenses: Lens[]) => {
         }
         // Right-side
         {
-            const d = lens.x2 - lens.x1
+            let d = lens.x2 - lens.x1
+            if (options.value.lensIdeal) {
+                d = 0
+            }
             const r = lens.R2
             const n = lens.n
             const nn = 1
@@ -410,7 +416,7 @@ export const calcLensInfo = (lenses: Lens[]) => {
     return { f, H }
 }
 
-const globalLensInfos = computed(() => {
+export const globalLensInfos = computed(() => {
     return lensesSorted.value.map((lens) => {
         return calcLensInfo([lens])
     })
@@ -424,8 +430,11 @@ export const globalLensRe = computed(() => {
     lensesSorted.value.forEach((lens, idx) => {
         const f = globalLensInfos.value[idx].f
         const r = calcLensR(lens) * lens.aperture
-        // xs.push(globalLensInfos.value[idx].H)
-        xs.push((lens.x1 + lens.x2) / 2)
+        if (options.value.lensIdeal) {
+            xs.push((lens.x1 + lens.x2) / 2)
+        } else {
+            xs.push(globalLensInfos.value[idx].H)
+        }
         if (idx === 0) {
             ps.push(xs[idx] + f)
             res.push(r)
@@ -439,9 +448,13 @@ export const globalLensRe = computed(() => {
             }
         }
     })
-    return Math.abs(res[0]) * re
+    return { re: Math.abs(res[0]) * re, H: ps[ps.length - 1] - globalLensInfo.value.f }
 })
 
 export const globalLensInfo = computed(() => {
     return calcLensInfo(lensesSorted.value)
+})
+
+export const lensExist = computed(() => {
+    return lensesSorted.value.length > 0
 })
\ No newline at end of file
diff --git a/src/math.ts b/src/math.ts
index c4be1b0..dc2591c 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -288,14 +288,14 @@ export const fGaussian = (f: number, a: Vec) => {
     return vec(bx, by)
 }
 
-export const calcLensF = (lens: Lens) => {
-    const d = lens.x2 - lens.x1
-    const R1 = lens.R1
-    const R2 = lens.R2
-    const n = lens.n
-    const inv = (n - 1) * (1 / R1 - 1 / R2) + (d / n) * ((n - 1) * (n - 1) / (R1 * R2))
-    return 1 / inv
-}
+// export const calcLensF = (lens: Lens) => {
+//     const d = lens.x2 - lens.x1
+//     const R1 = lens.R1
+//     const R2 = lens.R2
+//     const n = lens.n
+//     const inv = (n - 1) * (1 / R1 - 1 / R2) + (d / n) * ((n - 1) * (n - 1) / (R1 * R2))
+//     return 1 / inv
+// }
 
 export const calcRMax = (lens: Lens) => {
     const R1 = Math.abs(lens.R1)

From efe1b2a41ef632bacbe45c6000e7f6adbc02ef50 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 1 Jul 2024 08:33:54 +0900
Subject: [PATCH 49/53] Aperture for re calculation

---
 src/SVG/Aperture.vue |  3 +-
 src/globals.ts       | 68 +++++++++++++++++++++++++++++++++++---------
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/src/SVG/Aperture.vue b/src/SVG/Aperture.vue
index 2857abe..843028f 100644
--- a/src/SVG/Aperture.vue
+++ b/src/SVG/Aperture.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { aperture, body, maxLightX, rUI, sensor, style } from '@/globals';
 import WithBackground from './WithBackground.vue';
-import * as h from '../handlers'
 import CircleUI from './CircleUI.vue';
 import { Vec, vec } from '@/math';
 import MoveUI from './MoveUI.vue';
@@ -26,7 +25,7 @@ const move = () => {
         const sensorMinX = Math.min(sensor.value.s.x, sensor.value.t.x)
         if (xn < maxLightX.value) {
             xn = maxLightX.value
-        } else if (xn > sensorMinX - rUI.value) {
+        } else if (xn > sensorMinX) {
             xn = sensorMinX
         }
         aperture.value.x = xn
diff --git a/src/globals.ts b/src/globals.ts
index 73b6cb5..40bf18c 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -64,7 +64,13 @@ export const lensGroups = ref(lensGroups0())
 
 export const lensesSorted = computed(() => {
     const res = lensGroups.value.reduce((acc: Lens[], cur: LensGroup) => { return acc.concat(cur.lenses) }, [])
-    res.sort((a, b) => { return a.x1 - b.x1 })
+    res.sort((a, b) => {
+        if (options.value.lensIdeal) {
+            return (a.x1 + a.x2) / 2 - (b.x1 + b.x2) / 2
+        } else {
+            return a.x1 - b.x1
+        }
+    })
     return res
 })
 
@@ -423,28 +429,62 @@ export const globalLensInfos = computed(() => {
 })
 
 export const globalLensRe = computed(() => {
-    let re = 1
-    const res: number[] = []
-    const ps: number[] = []
-    const xs: number[] = []
+    // Setup
+    const params: { f: number, r: number, x: number }[] = []
     lensesSorted.value.forEach((lens, idx) => {
         const f = globalLensInfos.value[idx].f
         const r = calcLensR(lens) * lens.aperture
+        let x = globalLensInfos.value[idx].H
         if (options.value.lensIdeal) {
-            xs.push((lens.x1 + lens.x2) / 2)
-        } else {
-            xs.push(globalLensInfos.value[idx].H)
+            x = (lens.x1 + lens.x2) / 2
         }
+        params.push({ f, r, x })
+    })
+    if (options.value.aperture) {
+        params.push({ f: Infinity, r: aperture.value.r, x: aperture.value.x })
+    }
+    params.sort((a, b) => {return a.x - b.x})
+
+    // Calculation
+    let re = 1
+    let first = true
+    const res: number[] = []
+    const ps: number[] = []
+    params.forEach((param, idx) => {
+        const f = param.f
+        const r = param.r
+        const x = param.x
         if (idx === 0) {
-            ps.push(xs[idx] + f)
+            if (f === Infinity) {
+                ps.push(Infinity)
+            } else {
+                ps.push(x + f)
+            }
             res.push(r)
             re = 1
+            // first = false
         } else {
-            ps.push(xs[idx] + fGaussian(f, vec(ps[idx - 1] - xs[idx], 0)).x)
-            res.push((ps[idx - 1] - xs[idx]) / (ps[idx - 1] - xs[idx - 1]) * res[idx - 1])
-            if (r < Math.abs(res[idx])) {
-                re *= r / Math.abs(res[idx])
-                res[idx] = r
+            const xp = params[idx - 1].x
+            if (f === Infinity) {
+                ps.push(ps[idx - 1])
+                // res.push(Math.min(res[idx - 1], r))
+                res.push((ps[idx - 1] - x) / (ps[idx - 1] - xp) * res[idx - 1])
+                if (r < Math.abs(res[idx])) {
+                    re *= r / Math.abs(res[idx])
+                    res[idx] = r
+                }
+            } else {
+                if (ps[idx - 1] === Infinity) {
+                    ps.push(x + f)
+                    res.push(Math.min(res[idx - 1], r))
+                } else {
+                    ps.push(x + fGaussian(f, vec(ps[idx - 1] - x, 0)).x)
+                    res.push((ps[idx - 1] - x) / (ps[idx - 1] - xp) * res[idx - 1])
+                }
+                if (r < Math.abs(res[idx])) {
+                    re *= r / Math.abs(res[idx])
+                    res[idx] = r
+                }
             }
         }
     })

From 85112d9f680b5eea8941b1d08831bcdc000c0b6d Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 1 Jul 2024 08:37:00 +0900
Subject: [PATCH 50/53] Some refactoring

---
 src/Canvas.vue            | 2 +-
 src/Controller.vue        | 3 +--
 src/SVG/Aperture.vue      | 2 +-
 src/SVG/Body.vue          | 2 +-
 src/SVG/Guideline.vue     | 2 +-
 src/SVG/LensGroup.vue     | 3 +--
 src/SVG/LightParallel.vue | 6 +++---
 src/globals.ts            | 3 ---
 8 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index ffd77c6..6969ca2 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -2,7 +2,7 @@
 import { watch, onMounted, ref} from 'vue'
 
 import { state, lights, lensGroups, sensor, sensorData, apple, options, style, infR, lensesSorted, lensRs, lensFs, body, lensFronts, aperture, lensBacks } from './globals'
-import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, intersectionSS, calcRMax, intersectionX, intersectionY, calcLensNWavelength } from './math'
+import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, intersectionSS, intersectionX, intersectionY, calcLensNWavelength } from './math'
 
 import { Light } from './type'
 
diff --git a/src/Controller.vue b/src/Controller.vue
index 6c86a30..1e60aec 100644
--- a/src/Controller.vue
+++ b/src/Controller.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { state, lensGroups, defaultConvexLens, defaultConcaveLens, sensor, appleProps, options, style, globalLensInfo } from './globals'
+import { state, lensGroups, defaultConvexLens, defaultConcaveLens, sensor, appleProps, options, style } from './globals'
 import { humanReadable } from './utils';
 import { Light } from "./type"
-import { vec } from './math';
 
 const nRays = computed(() => {
     return 1 << state.value.nRaysLog
diff --git a/src/SVG/Aperture.vue b/src/SVG/Aperture.vue
index 843028f..a6ef8c5 100644
--- a/src/SVG/Aperture.vue
+++ b/src/SVG/Aperture.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { aperture, body, maxLightX, rUI, sensor, style } from '@/globals';
+import { aperture, body, maxLightX, sensor, style } from '@/globals';
 import WithBackground from './WithBackground.vue';
 import CircleUI from './CircleUI.vue';
 import { Vec, vec } from '@/math';
diff --git a/src/SVG/Body.vue b/src/SVG/Body.vue
index 946fa0b..b25dc03 100644
--- a/src/SVG/Body.vue
+++ b/src/SVG/Body.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { aperture, body, lensesSorted, lensFronts, lensGroups, lensRs, maxLensX, maxLightX, options, sensor } from '@/globals';
+import { aperture, body, lensesSorted, lensFronts, lensGroups, lensRs, maxLightX, options, sensor } from '@/globals';
 import WithBackground from './WithBackground.vue';
 import * as h from '../handlers'
 
diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index c4ed7f2..013f654 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { lensGroups, sensor, options, infR, globalLensInfo, globalLensRe } from '../globals'
+import { sensor, infR, globalLensInfo, globalLensRe } from '../globals'
 
 import { vec, fGaussian } from '../math'
 
diff --git a/src/SVG/LensGroup.vue b/src/SVG/LensGroup.vue
index 7924692..d4f8ecb 100644
--- a/src/SVG/LensGroup.vue
+++ b/src/SVG/LensGroup.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { lensGroups, releaseAllLenses, sensor, options, style, rUI, maxLightX } from '../globals'
+import { lensGroups, releaseAllLenses, sensor, maxLightX } from '../globals'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import { type LensGroup } from '../type'
 
diff --git a/src/SVG/LightParallel.vue b/src/SVG/LightParallel.vue
index 67de0c0..f12f07b 100644
--- a/src/SVG/LightParallel.vue
+++ b/src/SVG/LightParallel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { state, lights, infR, rUI, minLensX } from '../globals'
-import { vec, Vec } from '../math'
+import { computed } from 'vue'
+import { lights, rUI, minLensX } from '../globals'
+import { Vec } from '../math'
 import * as h from '../handlers'
 import WithBackground from './WithBackground.vue';
 import {Light} from '../type'
diff --git a/src/globals.ts b/src/globals.ts
index 40bf18c..2d3666d 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -447,7 +447,6 @@ export const globalLensRe = computed(() => {
 
     // Calculation
     let re = 1
-    let first = true
     const res: number[] = []
     const ps: number[] = []
     params.forEach((param, idx) => {
@@ -462,12 +461,10 @@ export const globalLensRe = computed(() => {
             }
             res.push(r)
             re = 1
-            // first = false
         } else {
             const xp = params[idx - 1].x
             if (f === Infinity) {
                 ps.push(ps[idx - 1])
-                // res.push(Math.min(res[idx - 1], r))
                 res.push((ps[idx - 1] - x) / (ps[idx - 1] - xp) * res[idx - 1])
                 if (r < Math.abs(res[idx])) {
                     re *= r / Math.abs(res[idx])

From d79aa870eb1e2e72421d349e33a078c8d3acf122 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 1 Jul 2024 08:53:44 +0900
Subject: [PATCH 51/53] Fix re calculation

---
 src/SVG/Guideline.vue | 10 ++++++----
 src/globals.ts        | 12 +++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index 013f654..e003aa7 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -63,12 +63,14 @@ const aov = computed(() => {
     let middleInnerBottom = focalPlaneTop.sub(lensBottom)
     // For over infinity modification
     if (x.value + f.value > sensorMiddle.value.x) {
-        // middleOuter = middleOuter.minus().normalize().mul(infR.value)
-        // middleInner = middleInner.minus().normalize().mul(infR.value)
+        middleOuterTop = middleOuterTop.minus().normalize().mul(infR.value)
+        middleOuterBottom = middleOuterBottom.minus().normalize().mul(infR.value)
+        middleInnerTop = middleInnerTop.minus().normalize().mul(infR.value)
+        middleInnerBottom = middleInnerBottom.minus().normalize().mul(infR.value)
     }
     if (x.value + f.value === sensorMiddle.value.x) {
-        // middleOuter = vec(x.value - sensor.value.x, -sensor.value.r).normalize().mul(infR.value)
-        // middleInner = vec(x.value - sensor.value.x, sensor.value.r).normalize().mul(infR.value)
+        // middleOuterTop = vec(x.value - sensorMiddle.value.x, -sensor.value.r).normalize().mul(infR.value)
+        // middleInnerTop = vec(x.value - sensorMiddle.value.x, sensor.value.r).normalize().mul(infR.value)
     }
 
     // Focal plane to infinity
diff --git a/src/globals.ts b/src/globals.ts
index 2d3666d..8a2cc36 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -430,6 +430,7 @@ export const globalLensInfos = computed(() => {
 
 export const globalLensRe = computed(() => {
     // Setup
+    // Lenses
     const params: { f: number, r: number, x: number }[] = []
     lensesSorted.value.forEach((lens, idx) => {
         const f = globalLensInfos.value[idx].f
@@ -440,10 +441,11 @@ export const globalLensRe = computed(() => {
         }
         params.push({ f, r, x })
     })
+    // Apertures
     if (options.value.aperture) {
         params.push({ f: Infinity, r: aperture.value.r, x: aperture.value.x })
     }
-    params.sort((a, b) => {return a.x - b.x})
+    params.sort((a, b) => { return a.x - b.x })
 
     // Calculation
     let re = 1
@@ -454,11 +456,7 @@ export const globalLensRe = computed(() => {
         const r = param.r
         const x = param.x
         if (idx === 0) {
-            if (f === Infinity) {
-                ps.push(Infinity)
-            } else {
-                ps.push(x + f)
-            }
+            ps.push(x + f)
             res.push(r)
             re = 1
         } else {
@@ -473,7 +471,7 @@ export const globalLensRe = computed(() => {
             } else {
                 if (ps[idx - 1] === Infinity) {
                     ps.push(x + f)
-                    res.push(Math.min(res[idx - 1], r))
+                    res.push(res[idx - 1])
                 } else {
                     ps.push(x + fGaussian(f, vec(ps[idx - 1] - x, 0)).x)
                     res.push((ps[idx - 1] - x) / (ps[idx - 1] - xp) * res[idx - 1])

From 92321000b3a4f558deac8563d6c94d68453d16c5 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Mon, 1 Jul 2024 09:03:13 +0900
Subject: [PATCH 52/53] Better re calculation

---
 src/Canvas.vue   |  2 +-
 src/SVG/Lens.vue | 25 +++++++++++--------------
 src/globals.ts   |  9 +++++++++
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/Canvas.vue b/src/Canvas.vue
index 6969ca2..4a304de 100644
--- a/src/Canvas.vue
+++ b/src/Canvas.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, onMounted, ref} from 'vue'
+import { watch, onMounted, ref } from 'vue'
 
 import { state, lights, lensGroups, sensor, sensorData, apple, options, style, infR, lensesSorted, lensRs, lensFs, body, lensFronts, aperture, lensBacks } from './globals'
 import { Vec, vec, vecRad, getIntersectionLens, crossAngle, fGaussian, intersectionSS, intersectionX, intersectionY, calcLensNWavelength } from './math'
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
index c7ec96b..3b09f95 100644
--- a/src/SVG/Lens.vue
+++ b/src/SVG/Lens.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { sensor, options,  maxLightX, calcLensInfo } from '../globals'
+import { sensor, options, maxLightX, calcLensInfo } from '../globals'
 import { vec, calcRMax, calcLensFront, calcLensBack } from '../math'
 import { setMoveHandler, preventDefaultAndStopPropagation, getPositionOnSvg, getPositionDiffOnSvgApp } from '../handlers'
 import type { Lens } from '../type'
@@ -277,18 +277,15 @@ const apertureSizeChangeStartHandler = (e: any) => {
         </g>
 
         <!-- Aperture -->
-        <g v-if="options.aperture">
-            <WithBackground>
-                <!-- Lines -->
-                <g class="stroke-white normal no-pointer-events">
-                    <line :x1="xm" :y1="-r" :x2="xm" :y2="-r * lens.aperture"></line>
-                    <line :x1="xm" :y1="r" :x2="xm" :y2="r * lens.aperture"></line>
-                </g>
-            </WithBackground>
-            <!-- UI -->
-            <CircleUI :c="vec(xm, r * lens.aperture)" @mousedown="apertureSizeChangeStartHandler"
-                class="vertical-resize">
-            </CircleUI>
-        </g>
+        <WithBackground>
+            <!-- Lines -->
+            <g class="stroke-white normal no-pointer-events">
+                <line :x1="xm" :y1="-r" :x2="xm" :y2="-r * lens.aperture"></line>
+                <line :x1="xm" :y1="r" :x2="xm" :y2="r * lens.aperture"></line>
+            </g>
+        </WithBackground>
+        <!-- UI -->
+        <CircleUI :c="vec(xm, r * lens.aperture)" @mousedown="apertureSizeChangeStartHandler" class="vertical-resize">
+        </CircleUI>
     </g>
 </template>
\ No newline at end of file
diff --git a/src/globals.ts b/src/globals.ts
index 8a2cc36..9cdae41 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -441,6 +441,15 @@ export const globalLensRe = computed(() => {
         }
         params.push({ f, r, x })
     })
+    // Body
+    if (!options.value.lensIdeal) {
+        lensFronts.value.forEach((front, idx) => {
+            params.push({ f: Infinity, r: lensRs.value[idx], x: front })
+        })
+        lensBacks.value.forEach((back, idx) => {
+            params.push({ f: Infinity, r: lensRs.value[idx], x: back })
+        })
+    }
     // Apertures
     if (options.value.aperture) {
         params.push({ f: Infinity, r: aperture.value.r, x: aperture.value.x })

From d81931b2db62581f0473197acf0706f2285e7796 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Wed, 3 Jul 2024 18:25:56 +0900
Subject: [PATCH 53/53] DoF for single lens and general sensor shape

---
 src/SVG/Guideline.vue |  48 +++++++-------
 src/SVG/SVG.vue       |  14 ++--
 src/globals.ts        | 148 ++++++++++++++++++++++++++++++++----------
 3 files changed, 149 insertions(+), 61 deletions(-)

diff --git a/src/SVG/Guideline.vue b/src/SVG/Guideline.vue
index e003aa7..d83c3ef 100644
--- a/src/SVG/Guideline.vue
+++ b/src/SVG/Guideline.vue
@@ -6,8 +6,12 @@ import { vec, fGaussian } from '../math'
 
 import WithBackground from './WithBackground.vue'
 
-const x = computed(() => {
-    return globalLensRe.value.H
+const xBack = computed(() => {
+    return globalLensRe.value.forward.H
+})
+
+const xFront = computed(() => {
+    return globalLensRe.value.backward.H
 })
 
 const f = computed(() => {
@@ -16,7 +20,7 @@ const f = computed(() => {
 
 // Effective lens radius
 const re = computed(() => {
-    return globalLensRe.value.re
+    return globalLensRe.value.forward.re
 })
 
 const sensorTop = computed(() => {
@@ -43,15 +47,15 @@ const sensorMiddle = computed(() => {
 const focal = computed(() => {
     const s = sensorTop.value
     const t = sensorBottom.value
-    const ss = fGaussian(f.value, vec(x.value - s.x, s.y))
-    const tt = fGaussian(f.value, vec(x.value - t.x, t.y))
-    return { s: vec(x.value - ss.x, ss.y), t: vec(x.value - tt.x, tt.y) }
+    const ss = fGaussian(f.value, vec(xBack.value - s.x, s.y))
+    const tt = fGaussian(f.value, vec(xBack.value - t.x, t.y))
+    return { s: vec(xFront.value - ss.x, ss.y), t: vec(xFront.value - tt.x, tt.y) }
 })
 
 // Angle of view
 const aov = computed(() => {
-    const lensTop = vec(x.value, -re.value)
-    const lensBottom = vec(x.value, re.value)
+    const lensTop = vec(xFront.value, -re.value)
+    const lensBottom = vec(xFront.value, re.value)
 
     const focalPlaneTop = focal.value.t
     const focalPlaneBottom = focal.value.s
@@ -62,13 +66,13 @@ const aov = computed(() => {
     let middleInnerTop = focalPlaneBottom.sub(lensTop)
     let middleInnerBottom = focalPlaneTop.sub(lensBottom)
     // For over infinity modification
-    if (x.value + f.value > sensorMiddle.value.x) {
+    if (xBack.value + f.value > sensorMiddle.value.x) {
         middleOuterTop = middleOuterTop.minus().normalize().mul(infR.value)
         middleOuterBottom = middleOuterBottom.minus().normalize().mul(infR.value)
         middleInnerTop = middleInnerTop.minus().normalize().mul(infR.value)
         middleInnerBottom = middleInnerBottom.minus().normalize().mul(infR.value)
     }
-    if (x.value + f.value === sensorMiddle.value.x) {
+    if (xBack.value + f.value === sensorMiddle.value.x) {
         // middleOuterTop = vec(x.value - sensorMiddle.value.x, -sensor.value.r).normalize().mul(infR.value)
         // middleInnerTop = vec(x.value - sensorMiddle.value.x, sensor.value.r).normalize().mul(infR.value)
     }
@@ -89,7 +93,7 @@ const dof = computed(() => {
     const sensorSize = st.length()
     const c = sensor.value.circleOfConfusion
     const v = st.normalize()
-    const s = sensor.value.s.add(vec(-x.value, 0))
+    const s = sensor.value.s.add(vec(-xBack.value, 0))
 
     let inner = ""
     let outer = ""
@@ -102,7 +106,7 @@ const dof = computed(() => {
         const py = (a.y - r) / a.x * px + r
 
         const p = fGaussian(f.value, vec(-px, py))
-        p.x = x.value - p.x
+        p.x = xFront.value - p.x
         p.y = p.y
         if (inner === "") {
             inner += `M ${p.x} ${p.y} `
@@ -118,7 +122,7 @@ const dof = computed(() => {
         const py = (a.y - r) / a.x * px + r
 
         const p = fGaussian(f.value, vec(-px, py))
-        p.x = x.value - p.x
+        p.x = xFront.value - p.x
         p.y = p.y
         if (outer === "") {
             outer += `M ${p.x} ${p.y} `
@@ -136,23 +140,23 @@ const dof = computed(() => {
         <g class="stroke-white">
             <!-- Inside camera -->
             <g class="thick">
-                <line :x1="sensorTop.x" :y1="sensorTop.y" :x2="x" :y2="-re"></line>
-                <line :x1="sensorBottom.x" :y1="sensorBottom.y" :x2="x" :y2="re"></line>
+                <line :x1="sensorTop.x" :y1="sensorTop.y" :x2="xBack" :y2="-re"></line>
+                <line :x1="sensorBottom.x" :y1="sensorBottom.y" :x2="xBack" :y2="re"></line>
             </g>
-            <g v-if="x !== sensorMiddle.x">
+            <g v-if="xBack !== sensorMiddle.x">
                 <!-- Lens to focal plane (outer) -->
                 <g class="thick">
-                    <line :x1="x" :y1="-re" :x2="x + aov.middleOuterTop.x" :y2="-re + aov.middleOuterTop.y"></line>
-                    <line :x1="x" :y1="re" :x2="x + aov.middleOuterBottom.x" :y2="re + aov.middleOuterBottom.y"></line>
+                    <line :x1="xFront" :y1="-re" :x2="xFront + aov.middleOuterTop.x" :y2="-re + aov.middleOuterTop.y"></line>
+                    <line :x1="xFront" :y1="re" :x2="xFront + aov.middleOuterBottom.x" :y2="re + aov.middleOuterBottom.y"></line>
                 </g>
                 <!-- Lens to focal plane (inner) -->
                 <g class="thicker">
-                    <line :x1="x" :y1="-re" :x2="x + aov.middleInnerTop.x" :y2="-re + aov.middleInnerTop.y"></line>
-                    <line :x1="x" :y1="re" :x2="x + aov.middleInnerBottom.x" :y2="re + aov.middleInnerBottom.y"></line>
+                    <line :x1="xFront" :y1="-re" :x2="xFront + aov.middleInnerTop.x" :y2="-re + aov.middleInnerTop.y"></line>
+                    <line :x1="xFront" :y1="re" :x2="xFront + aov.middleInnerBottom.x" :y2="re + aov.middleInnerBottom.y"></line>
                 </g>
             </g>
             <!-- Non over infinity -->
-            <g v-if="x + f < sensorMiddle.x">
+            <g v-if="xBack + f < sensorMiddle.x">
                 <!-- Focal plane -->
                 <line :x1="focal.s.x" :y1="focal.s.y" :x2="focal.t.x" :y2="focal.t.y" class="thick"></line>
                 <!-- Focal plane to inf (outer) -->
@@ -170,7 +174,7 @@ const dof = computed(() => {
                         :y2="focal.s.y + aov.innerBottom.y"></line>
                 </g>
                 <!-- Depth of focus -->
-                <g class="thicker">
+                <g class="thicker fill-none">
                     <path :d="dof.inner"></path>
                     <path :d="dof.outer"></path>
                 </g>
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 2b7bbad..03a38c9 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import { state, lights, lensGroups, style, apple, options, infR, rUI, globalLensInfo, globalLensRe, lensExist } from '../globals'
+import { state, lights, lensGroups, style, apple, options, infR, rUI, globalLensInfo, globalLensRe, lensExist, lensesSorted } from '../globals'
 import * as h from '../handlers'
 import { Light } from '../type'
 import { vec } from '../math'
@@ -75,14 +75,20 @@ const strokeWidth = computed(() => {
     <Body v-if="options.body"></Body>
 
     <!-- Guidelines -->
-    <Guideline v-if="options.lens && options.sensor && options.angleOfView"></Guideline>
+    <Guideline v-if="options.lens && lensesSorted.length === 1 && options.sensor && options.angleOfView"></Guideline>
 
     <!-- Global focal point -->
     <g v-if="options.lensFocalPoints && lensExist">
       <WithBackground>
-        <line :x1="globalLensRe.H" :y1="-globalLensRe.re" :x2="globalLensRe.H" :y2="globalLensRe.re" class="stroke-white thick"></line>
+        <g class="stroke-white thicker">
+          <line :x1="globalLensRe.forward.H" :y1="-globalLensRe.forward.re" :x2="globalLensRe.forward.H"
+            :y2="globalLensRe.forward.re"></line>
+          <line :x1="globalLensRe.backward.H" :y1="-globalLensRe.backward.re" :x2="globalLensRe.backward.H"
+            :y2="globalLensRe.backward.re"></line>
+        </g>
       </WithBackground>
-      <Point :c="vec(globalLensRe.H + globalLensInfo.f, 0)"></Point>
+      <Point :c="vec(globalLensRe.forward.H + globalLensInfo.f, 0)"></Point>
+      <Point :c="vec(globalLensRe.backward.H - globalLensInfo.f, 0)"></Point>
     </g>
 
     <!-- Items -->
diff --git a/src/globals.ts b/src/globals.ts
index 9cdae41..0db1b43 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -1,4 +1,4 @@
-import { ref, computed } from "vue"
+import { ref, computed, watch } from "vue"
 import { Vec, calcLensFront, vec, calcLensR, calcLensBack, fGaussian } from "./math"
 import { type Lens, type LensGroup, Light } from "./type"
 
@@ -62,15 +62,19 @@ export const lensGroups0 = (): LensGroup[] => {
 }
 export const lensGroups = ref(lensGroups0())
 
-export const lensesSorted = computed(() => {
-    const res = lensGroups.value.reduce((acc: Lens[], cur: LensGroup) => { return acc.concat(cur.lenses) }, [])
-    res.sort((a, b) => {
+const lensSort = (lenses: Lens[]) => {
+    lenses.sort((a, b) => {
         if (options.value.lensIdeal) {
             return (a.x1 + a.x2) / 2 - (b.x1 + b.x2) / 2
         } else {
-            return a.x1 - b.x1
+            return a.x1 - b.x2
         }
     })
+}
+
+export const lensesSorted = computed(() => {
+    const res = lensGroups.value.reduce((acc: Lens[], cur: LensGroup) => { return acc.concat(cur.lenses) }, [])
+    lensSort(res)
     return res
 })
 
@@ -375,13 +379,19 @@ export const body = computed(() => {
 })
 
 export const calcLensInfo = (lenses: Lens[]) => {
+    // TODO: This is not good
+    // Infinity loop may occur since calcLensInfo is used in lenSort()
+    // Skip for single element
+    if (lenses.length > 0) {
+        lensSort(lenses)
+    }
     const ll: { d: number, r: number, n: number, nn: number }[] = []
     lenses.forEach((lens, idx) => {
         // Left-side
         {
-            let d = idx === 0 ? 0 : lens.x1 - lenses[idx - 1].x2
-            if (options.value.lensIdeal && idx !== 0) {
-                d = (lens.x1 + lens.x2) / 2 - (lenses[idx - 1].x1 + lenses[idx - 1].x2) / 2
+            let d = lens.x2 - lens.x1
+            if (options.value.lensIdeal) {
+                d = 0
             }
             const r = lens.R1
             const n = 1
@@ -390,9 +400,12 @@ export const calcLensInfo = (lenses: Lens[]) => {
         }
         // Right-side
         {
-            let d = lens.x2 - lens.x1
-            if (options.value.lensIdeal) {
-                d = 0
+            let d = 0
+            if (idx < lenses.length - 1) {
+                d = lenses[idx + 1].x1 - lens.x2
+                if (options.value.lensIdeal) {
+                    d = (lenses[idx + 1].x1 + lenses[idx + 1].x2) / 2 - (lens.x1 + lens.x2) / 2
+                }
             }
             const r = lens.R2
             const n = lens.n
@@ -407,17 +420,22 @@ export const calcLensInfo = (lenses: Lens[]) => {
     ll.forEach((l, i) => {
         if (i === 0) {
             //ls[i] = Infinity
+            // lss[i] = 1 / (l.n / l.nn / ls[i] + 1 / l.r * (1 - l.n / l.nn))
             lss[i] = 1 / (1 / l.r * (1 - l.n / l.nn))
             f *= lss[i]
         } else {
-            ls[i] = lss[i - 1] - ll[i].d
+            ls[i] = lss[i - 1] - ll[i - 1].d
             lss[i] = 1 / (l.n / l.nn / ls[i] + 1 / l.r * (1 - l.n / l.nn))
             f *= lss[i] / ls[i]
         }
     })
     let H = 0
     if (lenses.length > 0) {
-        H = lenses[lenses.length - 1].x2 + lss[lss.length - 1] - f
+        if (options.value.lensIdeal) {
+            H = (lenses[lenses.length - 1].x1 + lenses[lenses.length - 1].x2) / 2 + lss[lss.length - 1] - f
+        } else {
+            H = lenses[lenses.length - 1].x2 + lss[lss.length - 1] - f
+        }
     }
     return { f, H }
 }
@@ -428,32 +446,28 @@ export const globalLensInfos = computed(() => {
     })
 })
 
-export const globalLensRe = computed(() => {
+const calcLensRe = (lenses: Lens[], apertures: { r: number, x: number }[]) => {
     // Setup
     // Lenses
     const params: { f: number, r: number, x: number }[] = []
-    lensesSorted.value.forEach((lens, idx) => {
-        const f = globalLensInfos.value[idx].f
+    lenses.forEach((lens, idx) => {
+        const info = calcLensInfo([lens])
+        const f = info.f
         const r = calcLensR(lens) * lens.aperture
-        let x = globalLensInfos.value[idx].H
-        if (options.value.lensIdeal) {
-            x = (lens.x1 + lens.x2) / 2
-        }
+        const x = options.value.lensIdeal ? (lens.x1 + lens.x2) / 2 : info.H
         params.push({ f, r, x })
+
+        if (!options.value.lensIdeal) {
+            // TODO: 
+            // params.push({ f: Infinity, x: lens.x1, r: calcLensR(lens) })
+            // params.push({ f: Infinity, x: lens.x2, r: calcLensR(lens) })
+        }
     })
     // Body
-    if (!options.value.lensIdeal) {
-        lensFronts.value.forEach((front, idx) => {
-            params.push({ f: Infinity, r: lensRs.value[idx], x: front })
-        })
-        lensBacks.value.forEach((back, idx) => {
-            params.push({ f: Infinity, r: lensRs.value[idx], x: back })
-        })
-    }
     // Apertures
-    if (options.value.aperture) {
-        params.push({ f: Infinity, r: aperture.value.r, x: aperture.value.x })
-    }
+    apertures.forEach((aperture) => {
+        params.push({ f: Infinity, r: aperture.r, x: aperture.x })
+    })
     params.sort((a, b) => { return a.x - b.x })
 
     // Calculation
@@ -471,8 +485,14 @@ export const globalLensRe = computed(() => {
         } else {
             const xp = params[idx - 1].x
             if (f === Infinity) {
-                ps.push(ps[idx - 1])
-                res.push((ps[idx - 1] - x) / (ps[idx - 1] - xp) * res[idx - 1])
+                // TODO: Buggy around
+                if (ps[idx - 1] === Infinity) {
+                    ps.push(ps[idx - 1])
+                    res.push(r)
+                } else {
+                    ps.push(ps[idx - 1])
+                    res.push((ps[idx - 1] - x) / (ps[idx - 1] - xp) * res[idx - 1])
+                }
                 if (r < Math.abs(res[idx])) {
                     re *= r / Math.abs(res[idx])
                     res[idx] = r
@@ -492,7 +512,44 @@ export const globalLensRe = computed(() => {
             }
         }
     })
-    return { re: Math.abs(res[0]) * re, H: ps[ps.length - 1] - globalLensInfo.value.f }
+    // return { re: Math.abs(res[0]) * re, H: ps[ps.length - 1] - calcLensInfo(lenses).f }
+    return { re: Math.abs(res[0]) * re, H: calcLensInfo(lenses).H }
+}
+
+export const globalLensRe = computed(() => {
+    const fwdApertures = []
+    const bwdApertures = []
+    if (options.value.aperture) {
+        fwdApertures.push({ x: aperture.value.x, r: aperture.value.r })
+        bwdApertures.push({ x: -aperture.value.x, r: aperture.value.r })
+    }
+    const fwdLenses = lensesSorted.value.map((lens) => {
+        return {
+            x1: lens.x1,
+            x2: lens.x2,
+            R1: lens.R1,
+            R2: lens.R2,
+            r: lens.r,
+            aperture: lens.aperture,
+            n: lens.n
+        }
+    })
+    const bwdLenses = lensesSorted.value.map((lens) => {
+        return {
+            x1: -lens.x2,
+            x2: -lens.x1,
+            R1: -lens.R2,
+            R2: -lens.R1,
+            r: lens.r,
+            aperture: lens.aperture,
+            n: lens.n
+        }
+    })
+    // console.log(calcLensInfo(fwdLenses), calcLensInfo(bwdLenses))
+    const forward = calcLensRe(fwdLenses, fwdApertures)
+    const backward = calcLensRe(bwdLenses, bwdApertures)
+    backward.H *= -1
+    return { forward, backward }
 })
 
 export const globalLensInfo = computed(() => {
@@ -501,4 +558,25 @@ export const globalLensInfo = computed(() => {
 
 export const lensExist = computed(() => {
     return lensesSorted.value.length > 0
-})
\ No newline at end of file
+})
+
+//================================
+// Simple test
+//================================
+
+const test = () => {
+    const SK6 = 1.61375
+    const SF1 = 1.71736
+    const lenses = [
+        { x1: 0, x2: 7.7, R1: 85.4, R2: -500, n: SK6, r: 10, aperture: 1 },
+        { x1: 8.2, x2: 27.2, R1: 44.5, R2: 70, n: SK6, r: 10, aperture: 1 },
+        { x1: 31.7, x2: 33.7, R1: -135, R2: 34.3, n: SF1, r: 10, aperture: 1 },
+        { x1: 52.7, x2: 60.7, R1: 146, R2: -46.8, n: SK6, r: 10, aperture: 1 },
+    ]
+    const info = calcLensInfo(lenses)
+    console.log(info.f, 99.78672652)
+}
+
+watch([options], () => {
+    test()
+}, { deep: true })
\ No newline at end of file