From 050ca5bf2b82cc1853e36d4e1852be247b97aab1 Mon Sep 17 00:00:00 2001
From: monman53 <tetsuro53@gmail.com>
Date: Fri, 14 Jun 2024 20:03:42 +0900
Subject: [PATCH] Minor change

---
 src/Controller.vue | 226 ++++++++++++++++++++++++++++++++++
 src/Document.vue   |  97 ++++++++-------
 src/Overlay.vue    |  72 +++++++++++
 src/Parameter.vue  | 299 ---------------------------------------------
 src/SVG/SVG.vue    |  10 +-
 src/Stage.vue      |   4 +-
 6 files changed, 359 insertions(+), 349 deletions(-)
 create mode 100644 src/Controller.vue
 create mode 100644 src/Overlay.vue
 delete mode 100644 src/Parameter.vue

diff --git a/src/Controller.vue b/src/Controller.vue
new file mode 100644
index 0000000..98a9c01
--- /dev/null
+++ b/src/Controller.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { state, lens, sensor, options, style, lensD, lensR, fNumber } from './globals'
+import { humanReadable } from './utils';
+
+const nRays = computed(() => {
+    return 1 << state.value.nRaysLog
+})
+</script>
+
+<template>
+    <table>
+        <!-- Rays -->
+        <tr>
+            <th colspan="3">Lights</th>
+        </tr>
+        <tr>
+            <td># of rays</td>
+            <td><input type="range" min="0" max="16" v-model.number="state.nRaysLog"></td>
+            <td>{{ nRays }}</td>
+        </tr>
+        <tr>
+            <td>Intensity</td>
+            <td><input type="range" min="0" max="1" step="0.001" v-model.number="style.rayIntensity"></td>
+            <td>{{ humanReadable(style.rayIntensity) }}</td>
+        </tr>
+        <tr>
+            <td>Ray thickness</td>
+            <td><input type="range" min="0.01" max="1" step="0.001" v-model.number="style.rayWidth"></td>
+            <td>{{ humanReadable(style.rayWidth) }}</td>
+        </tr>
+        <tr>
+            <td>New light color</td>
+            <td>
+                <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>
+            </td>
+            <td :style="`background-color: hsl(${state.newLightColor}, 100%, 50%)`"></td>
+        </tr>
+        <!-- Lens -->
+        <tr>
+            <th colspan="3">
+                <hr><label><input type="checkbox" v-model="options.lens"> Lens</label>
+            </th>
+        </tr>
+        <template v-if="options.lens">
+            <tr>
+                <td><label><input type="checkbox" v-model="options.lensFocalPoints"> Focal points</label>
+                </td>
+            </tr>
+            <tr v-if="options.lensFocalPoints && options.advanced">
+                <td><label><input type="checkbox" v-model="options.lensDoubleFocalPoints"> 2x Focal
+                        points</label>
+                </td>
+            </tr>
+        </template>
+        <tr>
+            <td><label><input type="checkbox" v-model="options.aperture"> Aperture</label></td>
+        </tr>
+        <template v-if="options.lens">
+            <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>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>
+            </template>
+            <tr>
+                <td>Focal Length</td>
+                <td></td>
+                <td>{{ humanReadable(lens.f) }}</td>
+            </tr>
+            <tr>
+                <td>F-number</td>
+                <td></td>
+                <td>{{ humanReadable(fNumber) }}</td>
+            </tr>
+            <template v-if="options.advanced">
+                <tr>
+                    <td>Position</td>
+                    <td></td>
+                    <td>{{ humanReadable(lens.x) }}</td>
+                </tr>
+                <tr>
+                    <td>Diameter</td>
+                    <td></td>
+                    <td>{{ humanReadable(lens.r * 2) }}</td>
+                </tr>
+                <tr>
+                    <td>Thickness</td>
+                    <td></td>
+                    <td>{{ humanReadable(lensD) }}</td>
+                </tr>
+            </template>
+        </template>
+        <!-- Screen -->
+        <tr>
+            <th colspan="3">
+                <hr><label><input type="checkbox" v-model="options.sensor"> Screen</label>
+            </th>
+        </tr>
+        <template v-if="options.sensor">
+            <tr>
+                <td><label><input type="checkbox" v-model="options.sensorPreview"> Preview</label></td>
+            </tr>
+            <!-- <tr v-if="options.sensorPreview">
+                            <td><label><input type="checkbox" v-model="options.sensorMemory"> Memory</label></td>
+                        </tr> -->
+            <template v-if="options.advanced">
+                <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>
+                        <td>{{ humanReadable(lens.circleOfConfusion) }}</td>
+                    </template>
+                </tr>
+                <tr>
+                    <td>Diameter</td>
+                    <td></td>
+                    <td>{{ humanReadable(sensor.r * 2) }}<br></td>
+                </tr>
+            </template>
+        </template>
+        <!-- Other options -->
+        <tr>
+            <th colspan="3">
+                <hr>Other Options
+            </th>
+        </tr>
+        <tr>
+            <td><label><input type="checkbox" v-model="options.body"> Wall</label></td>
+        </tr>
+        <tr v-if="options.lens && options.sensor">
+            <td><label><input type="checkbox" v-model="options.angleOfView"> Guide lines</label></td>
+        </tr>
+        <tr>
+            <td><label><input type="checkbox" v-model="options.advanced"> Advanced mode</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>
+                </td>
+            </tr>
+            <tr v-if="options.lens && options.sensor && options.circleOfConfusion && options.depthOfField">
+                <td><label><input type="checkbox" v-model="options.hyperfocalPoint"> Hyperfocal
+                        point</label>
+                </td>
+            </tr>
+            <tr>
+                <td><label><input type="checkbox" v-model="options.grid"> Grid</label></td>
+            </tr>
+            <tr>
+                <td><label><input type="checkbox" v-model="options.opticalAxis"> Optical axis</label></td>
+            </tr>
+        </template>
+        <!-- Field -->
+        <template v-if="options.advanced">
+            <tr>
+                <th colspan="3">
+                    <hr>Field
+                </th>
+            </tr>
+            <tr>
+                <td>Width</td>
+                <td></td>
+                <td>{{ humanReadable(state.width) }}</td>
+            </tr>
+            <tr>
+                <td>Height</td>
+                <td></td>
+                <td>{{ humanReadable(state.height) }}</td>
+            </tr>
+            <tr>
+                <td>Center x</td>
+                <td></td>
+                <td>{{ humanReadable(state.cx) }}</td>
+            </tr>
+            <tr>
+                <td>Center y</td>
+                <td></td>
+                <td>{{ humanReadable(state.cy) }}</td>
+            </tr>
+            <tr>
+                <td>Scale</td>
+                <td></td>
+                <td>{{ humanReadable(state.scale) }}</td>
+            </tr>
+        </template>
+    </table>
+</template>
+
+<style scoped>
+.indent {
+    padding-left: 1em;
+}
+
+table td {
+    vertical-align: top;
+}
+
+table td:nth-child(1) {
+    padding-left: 1em;
+    text-align: left;
+}
+
+table td:nth-child(2) {
+    text-align: right;
+}
+
+table td:nth-child(3) {
+    text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/Document.vue b/src/Document.vue
index 738e1bc..9a4a8fd 100644
--- a/src/Document.vue
+++ b/src/Document.vue
@@ -9,56 +9,65 @@ onMounted(() => {
 </script>
 
 <template>
-    <h3>Simple camera simulator</h3>
+    <div class="info">
+        <h3>Simple camera simulator</h3>
 
-    <dl>
-        <dt>Lensmaker's equation</dt>
-        <dd>
-            <p>
-                $$
-                \begin{eqnarray}
-                \frac{1}{f} = (n - 1)\left(\frac{1}{R_1} - \frac{1}{R_2}\right) + \frac{d(n-1)^2}{R_1 R_2}
-                \end{eqnarray}
-                $$
-                \(f\) : Focal length<br>
-                \(n\) : Refractive index<br>
-                \(R_1\) : Radius of curvature of the left side of surface (positive).<br>
-                \(R_2\) : Radius of curvature of the right side of surface (negative).<br>
-                \(d\) : Thickness (distance between left and right surface on the optical axis).<br>
-            </p>
-            <p>
-                In this application, we assume \(R = R_1 = -R_2 > 0\), and
-                \(d\) is replaced by \(d = 2(R - \sqrt{R^2 - r^2})\) where \(r\) is radius of the lens.
-                Then, the equation becomes
-                $$
-                \begin{eqnarray}
-                \frac{1}{f} = \frac{2(n-1)}{R} + \frac{2(R - \sqrt{R^2 - r^2})(n-1)^2}{R^2}.
-                \end{eqnarray}
-                $$
-                And, \(f\), \(n\) and \(r\) are our parameters. \(R\) is calculated by solving this equation for \(R\).
-                To solve this equation, numerical method (Newton's method) is performed because quartic equation is hard
-                to solve.
-            </p>
-        </dd>
+        <dl>
+            <dt>Lensmaker's equation</dt>
+            <dd>
+                <p>
+                    $$
+                    \begin{eqnarray}
+                    \frac{1}{f} = (n - 1)\left(\frac{1}{R_1} - \frac{1}{R_2}\right) + \frac{d(n-1)^2}{R_1 R_2}
+                    \end{eqnarray}
+                    $$
+                    \(f\) : Focal length<br>
+                    \(n\) : Refractive index<br>
+                    \(R_1\) : Radius of curvature of the left side of surface (positive).<br>
+                    \(R_2\) : Radius of curvature of the right side of surface (negative).<br>
+                    \(d\) : Thickness (distance between left and right surface on the optical axis).<br>
+                </p>
+                <p>
+                    In this application, we assume \(R = R_1 = -R_2 > 0\), and
+                    \(d\) is replaced by \(d = 2(R - \sqrt{R^2 - r^2})\) where \(r\) is radius of the lens.
+                    Then, the equation becomes
+                    $$
+                    \begin{eqnarray}
+                    \frac{1}{f} = \frac{2(n-1)}{R} + \frac{2(R - \sqrt{R^2 - r^2})(n-1)^2}{R^2}.
+                    \end{eqnarray}
+                    $$
+                    And, \(f\), \(n\) and \(r\) are our parameters. \(R\) is calculated by solving this equation for
+                    \(R\).
+                    To solve this equation, numerical method (Newton's method) is performed because quartic equation is
+                    hard
+                    to solve.
+                </p>
+            </dd>
 
-        <!-- <dt><a href="https://en.wikipedia.org/wiki/Focal_length">Focal length</a></dt> -->
-    </dl>
+            <!-- <dt><a href="https://en.wikipedia.org/wiki/Focal_length">Focal length</a></dt> -->
+        </dl>
 
-    <h3>Notice</h3>
-    <ul>
-        <li>Theoretical correctness is not guaranteed.</li>
-        <li>Here, we assume that the camera lens is singe symmetric spherical convex lens. The real camera lens is
-            composed
-            from multiple types of lenses.</li>
-        <li>The rays inside the ideal lens are not visualized correctly. The rays are refracted at the center plane of
-            the
-            lens.</li>
-        <li>The visual may differ depending on the browser.</li>
-        <li>Enabling GPU acceleration is highly recommended. (e.g. Enable Vulcan for Chrome)</li>
-    </ul>
+        <h3>Notice</h3>
+        <ul>
+            <li>Theoretical correctness is not guaranteed.</li>
+            <li>Here, we assume that the camera lens is singe symmetric spherical convex lens. The real camera lens is
+                composed
+                from multiple types of lenses.</li>
+            <li>The rays inside the ideal lens are not visualized correctly. The rays are refracted at the center plane
+                of
+                the
+                lens.</li>
+            <li>The visual may differ depending on the browser.</li>
+            <li>Enabling GPU acceleration is highly recommended. (e.g. Enable Vulcan for Chrome)</li>
+        </ul>
+    </div>
 </template>
 
 <style scoped>
+.info {
+    padding: 0.5em;
+}
+
 dt {
     font-weight: bold;
 }
diff --git a/src/Overlay.vue b/src/Overlay.vue
new file mode 100644
index 0000000..6ccefef
--- /dev/null
+++ b/src/Overlay.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import Document from './Document.vue'
+import Controller from './Controller.vue'
+
+const mode = ref("control")
+</script>
+
+<template>
+    <div class="base">
+        <div class="mode-select">
+            <div>
+                <i v-if="mode === 'control'" class="bi bi-gear-fill" @click="mode = ''"></i>
+                <i v-else class="bi bi-gear" @click="mode = 'control'"></i>
+            </div>
+            <div>
+                <i v-if="mode === 'info'" class="bi bi-info-circle-fill" @click="mode = ''"></i>
+                <i v-else class="bi bi-info-circle" @click="mode = 'info'"></i>
+            </div>
+            <div style="text-align: right">
+                <a href="https://github.com/monman53/simple-camera-simulator"><i class="bi bi-github"></i></a>
+            </div>
+        </div>
+        <div class="content">
+            <Controller v-if="mode === 'control'"></Controller>
+            <Document v-if="mode === 'info'"></Document>
+        </div>
+        <div v-if="mode !== ''" class="footer">
+            <small>Created by <a href="https://monman53.github.io/">monman53</a></small>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.base {
+    margin: 1em;
+    padding: 0.5em;
+    max-width: 30em;
+    border-radius: 1em;
+    color: white;
+    background-color: #0008;
+    backdrop-filter: blur(4px);
+}
+
+.content {
+    max-height: 80vh;
+    overflow: auto;
+}
+
+a {
+    color: white;
+    text-decoration: none;
+}
+
+.mode-select {
+    margin: 0.3em;
+    font-size: 1.5em;
+    display: grid;
+    grid-template-columns: auto 1fr 1fr;
+    gap: 0.3em;
+}
+
+.mode-select i {
+    cursor: pointer;
+}
+
+.footer {
+    padding: 0.3em;
+    text-align: right;
+}
+</style>
diff --git a/src/Parameter.vue b/src/Parameter.vue
deleted file mode 100644
index 795389a..0000000
--- a/src/Parameter.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import { state, lens, sensor, options, style, lensD, lensR, fNumber } from './globals'
-import { humanReadable } from './utils';
-
-import Document from './Document.vue'
-
-const mode = ref("control")
-
-const nRays = computed(() => {
-    return 1 << state.value.nRaysLog
-})
-</script>
-
-<template>
-    <div class="base">
-        <div class="mode-select">
-            <div>
-                <i v-if="mode === 'control'" class="bi bi-gear-fill" @click="mode = ''"></i>
-                <i v-else class="bi bi-gear" @click="mode = 'control'"></i>
-            </div>
-            <div>
-                <i v-if="mode === 'info'" class="bi bi-info-circle-fill" @click="mode = ''"></i>
-                <i v-else class="bi bi-info-circle" @click="mode = 'info'"></i>
-            </div>
-            <div style="text-align: right">
-                <a href="https://github.com/monman53/simple-camera-simulator" class="github"><i
-                        class="bi bi-github"></i></a>
-            </div>
-        </div>
-        <div class="content">
-            <template v-if="mode === 'control'">
-                <table>
-                    <!-- Rays -->
-                    <tr>
-                        <th colspan="3">Lights</th>
-                    </tr>
-                    <tr>
-                        <td># of rays</td>
-                        <td><input type="range" min="0" max="16" v-model.number="state.nRaysLog"></td>
-                        <td>{{ nRays }}</td>
-                    </tr>
-                    <tr>
-                        <td>Intensity</td>
-                        <td><input type="range" min="0" max="1" step="0.001" v-model.number="style.rayIntensity"></td>
-                        <td>{{ humanReadable(style.rayIntensity) }}</td>
-                    </tr>
-                    <tr>
-                        <td>Ray thickness</td>
-                        <td><input type="range" min="0.01" max="1" step="0.001" v-model.number="style.rayWidth"></td>
-                        <td>{{ humanReadable(style.rayWidth) }}</td>
-                    </tr>
-                    <tr>
-                        <td>New light color</td>
-                        <td>
-                            <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>
-                        </td>
-                        <td :style="`background-color: hsl(${state.newLightColor}, 100%, 50%)`"></td>
-                    </tr>
-                    <!-- Lens -->
-                    <tr>
-                        <th colspan="3">
-                            <hr><label><input type="checkbox" v-model="options.lens"> Lens</label>
-                        </th>
-                    </tr>
-                    <template v-if="options.lens">
-                        <tr>
-                            <td><label><input type="checkbox" v-model="options.lensFocalPoints"> Focal points</label>
-                            </td>
-                        </tr>
-                        <tr v-if="options.lensFocalPoints && options.advanced">
-                            <td><label><input type="checkbox" v-model="options.lensDoubleFocalPoints"> 2x Focal
-                                    points</label>
-                            </td>
-                        </tr>
-                    </template>
-                    <tr>
-                        <td><label><input type="checkbox" v-model="options.aperture"> Aperture</label></td>
-                    </tr>
-                    <template v-if="options.lens">
-                        <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>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>
-                        </template>
-                        <tr>
-                            <td>Focal Length</td>
-                            <td></td>
-                            <td>{{ humanReadable(lens.f) }}</td>
-                        </tr>
-                        <tr>
-                            <td>F-number</td>
-                            <td></td>
-                            <td>{{ humanReadable(fNumber) }}</td>
-                        </tr>
-                        <template v-if="options.advanced">
-                            <tr>
-                                <td>Position</td>
-                                <td></td>
-                                <td>{{ humanReadable(lens.x) }}</td>
-                            </tr>
-                            <tr>
-                                <td>Diameter</td>
-                                <td></td>
-                                <td>{{ humanReadable(lens.r * 2) }}</td>
-                            </tr>
-                            <tr>
-                                <td>Thickness</td>
-                                <td></td>
-                                <td>{{ humanReadable(lensD) }}</td>
-                            </tr>
-                        </template>
-                    </template>
-                    <!-- Screen -->
-                    <tr>
-                        <th colspan="3">
-                            <hr><label><input type="checkbox" v-model="options.sensor"> Screen</label>
-                        </th>
-                    </tr>
-                    <template v-if="options.sensor">
-                        <tr>
-                            <td><label><input type="checkbox" v-model="options.sensorPreview"> Preview</label></td>
-                        </tr>
-                        <!-- <tr v-if="options.sensorPreview">
-                            <td><label><input type="checkbox" v-model="options.sensorMemory"> Memory</label></td>
-                        </tr> -->
-                        <template v-if="options.advanced">
-                            <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>
-                                    <td>{{ humanReadable(lens.circleOfConfusion) }}</td>
-                                </template>
-                            </tr>
-                            <tr>
-                                <td>Diameter</td>
-                                <td></td>
-                                <td>{{ humanReadable(sensor.r * 2) }}<br></td>
-                            </tr>
-                        </template>
-                    </template>
-                    <!-- Other options -->
-                    <tr>
-                        <th colspan="3">
-                            <hr>Other Options
-                        </th>
-                    </tr>
-                    <tr>
-                        <td><label><input type="checkbox" v-model="options.body"> Wall</label></td>
-                    </tr>
-                    <tr v-if="options.lens && options.sensor">
-                        <td><label><input type="checkbox" v-model="options.angleOfView"> Guide lines</label></td>
-                    </tr>
-                    <tr>
-                        <td><label><input type="checkbox" v-model="options.advanced"> Advanced mode</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>
-                            </td>
-                        </tr>
-                        <tr v-if="options.lens && options.sensor && options.circleOfConfusion && options.depthOfField">
-                            <td><label><input type="checkbox" v-model="options.hyperfocalPoint"> Hyperfocal
-                                    point</label>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><label><input type="checkbox" v-model="options.grid"> Grid</label></td>
-                        </tr>
-                        <tr>
-                            <td><label><input type="checkbox" v-model="options.opticalAxis"> Optical axis</label></td>
-                        </tr>
-                    </template>
-                    <!-- Field -->
-                    <template v-if="options.advanced">
-                        <tr>
-                            <th colspan="3">
-                                <hr>Field
-                            </th>
-                        </tr>
-                        <tr>
-                            <td>Width</td>
-                            <td></td>
-                            <td>{{ humanReadable(state.width) }}</td>
-                        </tr>
-                        <tr>
-                            <td>Height</td>
-                            <td></td>
-                            <td>{{ humanReadable(state.height) }}</td>
-                        </tr>
-                        <tr>
-                            <td>Center x</td>
-                            <td></td>
-                            <td>{{ humanReadable(state.cx) }}</td>
-                        </tr>
-                        <tr>
-                            <td>Center y</td>
-                            <td></td>
-                            <td>{{ humanReadable(state.cy) }}</td>
-                        </tr>
-                        <tr>
-                            <td>Scale</td>
-                            <td></td>
-                            <td>{{ humanReadable(state.scale) }}</td>
-                        </tr>
-                    </template>
-                </table>
-            </template>
-            <template v-if="mode === 'info'">
-                <div class="info">
-                    <Document></Document>
-                </div>
-            </template>
-        </div>
-        <div v-if="mode !== ''" class="footer">
-            <small>Created by <a href="https://monman53.github.io/">monman53</a></small>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.base {
-    margin: 1em;
-    padding: 0.5em;
-    max-width: 30em;
-    border-radius: 1em;
-    color: white;
-    background-color: #0008;
-    backdrop-filter: blur(4px);
-}
-
-.content {
-    max-height: 80vh;
-    overflow: auto;
-}
-
-.indent {
-    padding-left: 1em;
-}
-
-table td {
-    vertical-align: top;
-}
-
-table td:nth-child(1) {
-    padding-left: 1em;
-    text-align: left;
-}
-
-table td:nth-child(2) {
-    text-align: right;
-}
-
-table td:nth-child(3) {
-    text-align: right;
-}
-
-a {
-    color: white;
-    text-decoration: none;
-}
-
-.mode-select {
-    margin: 0.3em;
-    font-size: 1.5em;
-    display: grid;
-    grid-template-columns: auto 1fr 1fr;
-    gap: 0.3em;
-}
-
-.mode-select i {
-    cursor: pointer;
-}
-
-.info {
-    padding: 0.5em;
-}
-.footer {
-    padding: 0.3em;
-    text-align: right;
-}
-</style>
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index a0d3b4f..a48afbb 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -147,8 +147,7 @@ const rUI = computed(() => {
 
     <!-- Aperture -->
     <g v-if="options.aperture">
-      <circle :cx="lens.x" :cy="lens.r * lens.aperture" :r="rUI" @mousedown="h.apertureSizeChangeStartHandler"
-        class="hover-sibling-master ui-hidden"></circle>
+      <!-- Lines -->
       <line :x1="lens.x" :y1="-lens.r" :x2="lens.x" :y2="-lens.r * lens.aperture"
         class="hover-sibling-bg no-pointer-events">
       </line>
@@ -160,6 +159,9 @@ const rUI = computed(() => {
       </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>
 
     <!-- Lights -->
@@ -219,12 +221,12 @@ svg {
 
 .hover-sibling {
   stroke: white;
-  stroke-width: v-bind('strokeWidth.thick');
+  stroke-width: v-bind('strokeWidth.normal');
 }
 
 .hover-sibling-bg {
   stroke: v-bind('lineBgColor');
-  stroke-width: v-bind('strokeWidth.thickBg');
+  stroke-width: v-bind('strokeWidth.normalBg');
 }
 
 .hover-sibling-master:hover~.hover-sibling,
diff --git a/src/Stage.vue b/src/Stage.vue
index 7caa270..2a39955 100644
--- a/src/Stage.vue
+++ b/src/Stage.vue
@@ -5,7 +5,7 @@ import { state, options } from './globals'
 
 import SVG from './SVG/SVG.vue'
 import Canvas from './Canvas.vue'
-import Parameter from './Parameter.vue'
+import Overlay from './Overlay.vue'
 import Preview from './Preview.vue'
 import Memory from './Memory.vue'
 
@@ -44,7 +44,7 @@ onMounted(() => {
     <div id="stage" ref="main">
       <Canvas id="canvas"></Canvas>
       <SVG id="svg"></SVG>
-      <Parameter id="parameter"></Parameter>
+      <Overlay id="parameter"></Overlay>
     </div>
     <div v-show="options.sensor && options.sensorPreview">
       <Preview></Preview>