feat: Add extra space to settings tab

Author: aklinker1

bun.lockb

@@ -6,6 +6,7 @@
   ],
   "scripts": {
     "dev": "bun --cwd web dev",
+    "build": "bun --cwd npm build",
     "check": "bun --cwd npm check && bun --cwd web check",
     "prepare": "simple-git-hooks"
   },

package.json

@@ -1,8 +1,24 @@
 <script lang="ts" setup>
+import { Distance } from '@aklinker1/cutlist';
+
 const optimize = useOptimizeForSetting();
 const bladeWidth = useBladeWidthSetting();
 const distanceUnit = useDistanceUnit();
 const showPartNumbers = useShowPartNumbers();
+const extraSpace = useExtraSpaceSetting();
+
+// Convert values when units change
+watch(distanceUnit, (newUnit, oldUnit) => {
+  if (!newUnit || !oldUnit) return;
+
+  console.log(newUnit, oldUnit);
+  const convertValue = (value: Ref<string | number>) => {
+    const dist = new Distance(value.value + oldUnit);
+    value.value = dist[newUnit];
+  };
+  convertValue(bladeWidth);
+  convertValue(extraSpace);
+});
 </script>
 
 <template>
@@ -11,10 +27,14 @@ const showPartNumbers = useShowPartNumbers();
       <USelect v-model="distanceUnit" :options="['in', 'm', 'mm']" />
     </UFormGroup>
 
-    <UFormGroup label="Blade width (in):">
+    <UFormGroup :label="`Blade width (${distanceUnit}):`">
       <UInput v-model="bladeWidth" type="number" />
     </UFormGroup>
 
+    <UFormGroup :label="`Extra space (${distanceUnit}):`">
+      <UInput v-model="extraSpace" type="number" />
+    </UFormGroup>
+
     <UFormGroup label="Optimize for:">
       <USelect v-model="optimize" :options="['Cuts', 'Space']" />
     </UFormGroup>

web/components/SettingsTab.vue

@@ -5,5 +5,6 @@ import { Distance } from '@aklinker1/cutlist';
  */
 export default function () {
   const bladeWidth = useBladeWidthSetting();
-  return computed(() => new Distance(bladeWidth.value + 'in').m);
+  const unit = useDistanceUnit();
+  return computed(() => new Distance(bladeWidth.value + unit.value).m);
 }

web/composables/useBladeWidth.ts

@@ -3,9 +3,11 @@ import type { Config } from '@aklinker1/cutlist';
 export default createSharedComposable(() => {
   const bladeWidth = useBladeWidth();
   const optimize = useOptimizeFor();
+  const extraSpace = useExtraSpace();
 
   return computed<Config>(() => ({
     bladeWidth: bladeWidth.value,
     optimize: optimize.value,
+    extraSpace: extraSpace.value,
   }));
 });

web/composables/useCutlistConfig.ts

@@ -0,0 +1,10 @@
+import { Distance } from '@aklinker1/cutlist';
+
+/**
+ * Returns the extra space in standard units based off the settings.
+ */
+export default function () {
+  const extraSpace = useExtraSpaceSetting();
+  const unit = useDistanceUnit();
+  return computed(() => new Distance(extraSpace.value + unit.value).m);
+}

web/composables/useExtraSpace.ts

@@ -0,0 +1,8 @@
+/**
+ * Stores the preference from the settings page directly. Unless you're on the
+ * settings page, you should probably use `useExtraSpace` instead for the
+ * standardized value.
+ */
+export default createGlobalState(() =>
+  useLocalStorage('@cutlist/extra-space', '0'),
+);