diff --git a/src/SVG/Light.vue b/src/SVG/Light.vue
index d029376..c0759c2 100644
--- a/src/SVG/Light.vue
+++ b/src/SVG/Light.vue
@@ -1,12 +1,34 @@
+<script lang="ts">
+export const addLight = (e: any) => {
+    preventDefaultAndStopPropagation(e)
+    const m = getPositionOnSvgApp(e);
+    let wavelengths = [state.value.newLightWavelength]
+    if (state.value.newLightColorComposite) {
+        const n = state.value.newLightColorCompositeN
+        wavelengths = []
+        for (let i = 0; i < n; i++) {
+            wavelengths.push(wavelength.min * i / n + wavelength.max * (n - i) / n)
+        }
+    }
+    if (state.value.newLightType === 'Point') {
+        lights.value.push({ type: 'Point', c: m, wavelengths })
+    }
+    if (state.value.newLightType === 'Parallel') {
+        lights.value.push({ type: 'Parallel', s: vec(m.x, m.y - 25), t: vec(m.x, m.y + 25), wavelengths })
+    }
+}
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue'
-import { lights, rUI } from '../globals'
-import { Vec, wavelengthToHue } from '../math'
+import { lights, rUI, state } from '../globals'
+import { Vec, vec, wavelengthToHue } from '../math'
 import WithBackground from './WithBackground.vue';
 import CircleUI from './CircleUI.vue';
 import MoveUI from './MoveUI.vue';
 import type { LightParallel, LightType } from '@/type';
-import { lightHSL } from '@/collection/color';
+import { lightHSL, wavelength } from '@/collection/color';
+import { getPositionOnSvgApp, preventDefaultAndStopPropagation } from './SVG.vue';
 
 const props = defineProps<{
     light: LightType
@@ -101,6 +123,7 @@ const fill = computed(() => {
     }
 })
 
+
 const deleteLight = (e: any, idx: number) => {
     e.preventDefault()
     e.stopPropagation()
diff --git a/src/SVG/SVG.vue b/src/SVG/SVG.vue
index 8892812..95b8a88 100644
--- a/src/SVG/SVG.vue
+++ b/src/SVG/SVG.vue
@@ -26,7 +26,7 @@ const getPositionDiffOnSvgApp = (e: any, m0: Vec) => {
   return d
 }
 
-const preventDefaultAndStopPropagation = (e: any) => {
+export const preventDefaultAndStopPropagation = (e: any) => {
   e.stopPropagation()
   e.preventDefault()
 }
@@ -61,7 +61,7 @@ import { Vec, vec } from '../math'
 
 import Grid from './Grid.vue'
 import Guideline from './Guideline.vue'
-import LightSVG from './Light.vue'
+import LightSVG, { addLight } from './Light.vue'
 import LensGroup from './LensGroup.vue'
 import WithBackground from './WithBackground.vue'
 import Aperture from './Aperture.vue'
@@ -127,25 +127,6 @@ const move = () => {
   }
 }
 
-const addLight = (e: any) => {
-  preventDefaultAndStopPropagation(e)
-  const m = getPositionOnSvgApp(e);
-  let wavelengths = [state.value.newLightWavelength]
-  if (state.value.newLightColorComposite) {
-    const n = state.value.newLightColorCompositeN
-    wavelengths = []
-    for (let i = 0; i < n; i++) {
-      wavelengths.push(wavelength.min * i / n + wavelength.max * (n - i) / n)
-    }
-  }
-  if (state.value.newLightType === 'Point') {
-    lights.value.push({ type: 'Point', c: m, wavelengths })
-  }
-  if (state.value.newLightType === 'Parallel') {
-    lights.value.push({ type: 'Parallel', s: vec(m.x, m.y - 25), t: vec(m.x, m.y + 25), wavelengths })
-  }
-}
-
 const pupilPath = computed(() => {
   let top = ""
   let bottom = ""