refactor: use types from optimization in vue components

src/components/ControlPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Panel } from '@/core/panel';
 import { ref } from 'vue';
 
 defineProps<{
@@ -17,7 +18,7 @@ const bottom = ref(false);
 const left = ref(false);
 
 const emit = defineEmits<{
-    addPanel: [panel: Panel];
+    addPanel: [{ panel: Panel, quantity: number} ];
 }>()
 
 function reset() {
@@ -33,13 +34,18 @@ function reset() {
 
 function addPanel() {
     emit('addPanel', {
-        length: length.value,
-        width: width.value,
+        panel: {
+            length: length.value,
+            width: width.value,
+            edgeReduction: {
+                top: top.value,
+                right: right.value,
+                bottom: bottom.value,
+                left: left.value,
+                thickness: parseInt(localStorage.getItem('panelEdgeReduction') || '3'),
+            },
+        },
         quantity: quantity.value,
-        topEdgeReduction: top.value,
-        rightEdgeReduction: right.value,
-        bottomEdgeReduction: bottom.value,
-        leftEdgeReduction: left.value,
     });
     reset();
 }

src/components/Panels.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const panels = defineModel<Panel[]>()
+import type { Panel } from '@/core/panel';
+
+const panels = defineModel<{ panel: Panel, quantity: number }[]>()
 </script>
 <template>
     <table class="table table-sm">
@@ -13,16 +15,16 @@ const panels = defineModel<Panel[]>()
             </tr>
         </thead>
         <tbody>
-            <tr v-for="(panel, index) in panels" :key="index">
-                <td>{{ panel.length }}</td>
-                <td>{{ panel.width }}</td>
-                <td>{{ panel.quantity }}</td>
+            <tr v-for="(multipanel, index) in panels" :key="index">
+                <td>{{ multipanel.panel.length }}</td>
+                <td>{{ multipanel.panel.width }}</td>
+                <td>{{ multipanel.quantity }}</td>
                 <td>
                     <div class="border-4 w-6 h-6 rounded-btn" :class="{
-                        'border-t-primary': panel.topEdgeReduction,
-                        'border-r-primary': panel.rightEdgeReduction,
-                        'border-b-primary': panel.bottomEdgeReduction,
-                        'border-l-primary': panel.leftEdgeReduction,
+                        'border-t-primary': multipanel.panel.edgeReduction.top,
+                        'border-r-primary': multipanel.panel.edgeReduction.right,
+                        'border-b-primary': multipanel.panel.edgeReduction.bottom,
+                        'border-l-primary': multipanel.panel.edgeReduction.left,
                     }">
                     </div>
                 </td>

src/core/optimize.ts

@@ -1,6 +1,6 @@
-import { OptimizedSheet } from "./optimizedSheet";
-import { Panel } from "./panel";
-import { Sheet } from "./sheet";
+import type { OptimizedSheet } from "./optimizedSheet";
+import type { Panel } from "./panel";
+import type { Sheet } from "./sheet";
 
 type FreeSpace = {
     length: number;

src/core/optimizedPanel.ts

@@ -1,4 +1,4 @@
-import { Panel } from "./panel";
+import type { Panel } from "./panel";
 
 export type OptimizedPanel = {
     panel: Panel;

src/core/optimizedSheet.ts

@@ -1,5 +1,5 @@
-import { OptimizedPanel } from "./optimizedPanel";
-import { Sheet } from "./sheet";
+import type { OptimizedPanel } from "./optimizedPanel";
+import type { Sheet } from "./sheet";
 
 export type OptimizedSheet = {
     panels: OptimizedPanel[];

src/core/panel.ts

@@ -1,4 +1,4 @@
-import { EdgeReduction } from "./edgeReduction";
+import type { EdgeReduction } from "./edgeReduction";
 
 export type Panel = {
     length: number;

src/core/sheet.ts

@@ -1,4 +1,4 @@
-import { EdgeReduction } from "./edgeReduction";
+import type { EdgeReduction } from "./edgeReduction";
 
 export type Sheet = {
     length: number;

src/views/HomeView.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import ControlPanel from '@/components/ControlPanel.vue';
 import Panels from '@/components/Panels.vue';
+import type { Panel } from '@/core/panel';
 import { ref } from 'vue';
 
 const currentTab = ref('Panels');
 const tabList = ['Panels', 'Cuts'];
 
-const panels = ref<Panel[]>([]);
+const panels = ref<{ panel: Panel, quantity: number }[]>([]);
 </script>
 
 <template>

src/views/SettingsView.vue

@@ -21,7 +21,7 @@ watch(bladeThickness, (x) => {
   localStorage.setItem('bladeThickness', x.toString())
 })
 
-const panelEdgeReduction = ref(parseInt(localStorage.getItem('panelEdgeReduction') || '0'))
+const panelEdgeReduction = ref(parseInt(localStorage.getItem('panelEdgeReduction') || '3'))
 watch(panelEdgeReduction, (x) => {
   localStorage.setItem('panelEdgeReduction', x.toString())
 })