Add edit panel

monman53 · Jul 10, 2024 · 48ce3a7 · 48ce3a7
1 parent 1ac9edb
commit 48ce3a7
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 24 deletions.
diff --git a/src/EditPanel.vue b/src/EditPanel.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { calcLensInfo, lensGroups } from './globals';
+import { humanReadable } from './utils';
+
+</script>
+
+<template>
+    <div class="edit-panel-base">
+        <!-- Lenses -->
+        <template v-for="(lensGroup, i) of lensGroups">
+            <template v-if="lensGroup.selected">
+                <fieldset>
+                    <legend>Group {{ i }} (f: {{ humanReadable(calcLensInfo(lensGroup.lenses).f) }})</legend>
+                    <template v-for="(lens, j) of lensGroup.lenses">
+                        <fieldset>
+                            <legend>Lens {{ j }} (f: {{ humanReadable(calcLensInfo([lens]).f) }})</legend>
+                            <table>
+                                <tr>
+                                    <th>x</th>
+                                    <th>r</th>
+                                </tr>
+                                <template v-for="plane of lens.planes">
+                                    <tr>
+                                        <td><input type="number" v-model.number="plane.x"></td>
+                                        <td><input type="number" v-model.number="plane.r"></td>
+                                    </tr>
+                                </template>
+                            </table>
+                        </fieldset>
+                    </template>
+                </fieldset>
+            </template>
+        </template>
+    </div>
+</template>
+
+<style>
+.edit-panel-base {
+    padding: 0.5em;
+}
+
+table td {
+    text-align: right;
+}
+
+input[type='number'] {
+    width: 5em;
+}
+
+h3,
+h4 {
+    margin: 0;
+}
+
+fieldset {
+    padding: 0.1em 0.2em;
+    border-top: 0;
+    border-bottom: 0;
+    border-right: 0;
+}
+</style>
diff --git a/src/SVG/Lens.vue b/src/SVG/Lens.vue
@@ -163,9 +163,6 @@ const apertureSizeChangeStartHandler = () => {
             </g>
         </WithBackground>
 
-        <!-- dummy for ui -->
-        <path :d="path" class='transparent grab' stroke-width="0" />
-
         <!-- Thickness and change UI -->
         <g class="ui-stroke transparent horizontal-resize">
             <template v-for="(plane, idx) of lens.planes">
@@ -192,17 +189,22 @@ const apertureSizeChangeStartHandler = () => {
         </g>
 
         <!-- 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 -->
-        <MoveUI :handler-creator="apertureSizeChangeStartHandler">
-            <CircleUI :c="vec(xm, r * lens.aperture)" class="vertical-resize">
-            </CircleUI>
-        </MoveUI>
+        <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 -->
+            <MoveUI :handler-creator="apertureSizeChangeStartHandler">
+                <CircleUI :c="vec(xm, r * lens.aperture)" class="vertical-resize">
+                </CircleUI>
+            </MoveUI>
+        </g>
+
+        <!-- dummy for ui -->
+        <path :d="path" class='transparent grab' stroke-width="0" />
     </g>
 </template>
diff --git a/src/SVG/Light.vue b/src/SVG/Light.vue
@@ -22,7 +22,7 @@ export const addLight = (e: any) => {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { lights, rUI, state } from '../globals'
-import { Vec, vec, wavelengthToHue } from '../math'
+import { Vec, vec } from '../math'
 import WithBackground from './WithBackground.vue';
 import CircleUI from './CircleUI.vue';
 import MoveUI from './MoveUI.vue';
@@ -157,9 +157,6 @@ const deleteLight = (e: any, idx: number) => {
             <MoveUI :handler-creator="parallelLightNodeMoveStartHandler(idx, light)">
                 <CircleUI :c="light.s"></CircleUI>
             </MoveUI>
-            <!-- <MoveUI :handler-creator="parallelLightNodeMoveStartHandler(idx, light.t)">
-                <CircleUI :c="light.t"></CircleUI>
-            </MoveUI> -->
         </g>
     </g>
 </template>
diff --git a/src/TopLeft.vue b/src/TopLeft.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 
 import Document from './Document.vue'
 import Controller from './Controller.vue'
+import EditPanel from './EditPanel.vue';
 
-const mode = ref("control")
+type ModeType = "control" | "edit" | "info" | ""
+
+const mode: Ref<ModeType> = ref("control")
 </script>
 
 <template>
@@ -14,6 +17,10 @@ const mode = ref("control")
                 <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 === 'edit'" class="bi bi-pen-fill" @click="mode = ''"></i>
+                <i v-else class="bi bi-pen" @click="mode = 'edit'"></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>
@@ -25,8 +32,9 @@ const mode = ref("control")
         <div class="content">
             <Controller v-if="mode === 'control'"></Controller>
             <Document v-if="mode === 'info'"></Document>
+            <EditPanel v-if="mode === 'edit'"></EditPanel>
         </div>
-        <div v-if="mode !== ''" class="footer">
+        <div v-if="mode === 'info'" class="footer">
             <small>Created by <a href="https://monman53.github.io/">monman53</a></small>
         </div>
     </div>
@@ -57,7 +65,7 @@ a {
     margin: 0.3em;
     font-size: 1.5em;
     display: grid;
-    grid-template-columns: auto 1fr 1fr;
+    grid-template-columns: auto auto auto 1fr;
     gap: 0.3em;
 }
 
@@ -69,5 +77,4 @@ a {
     padding: 0.3em;
     text-align: right;
 }
-
 </style>