refactor: extract updatePitchFromThread/Turning into useCannedCyclePitch

Pulls the compound-angle + TPI label math out of App.vue along with the
xpitchlabel/zpitchlabel/xpitchangle refs. Also inlines the TPI formatting
into a small helper so the thread-mode branch is easier to read.

The larger thread/turn run handlers (threadStartClicked etc) stay in App.vue
for now — their coupling to 15+ composable refs doesn't justify extraction
at this size.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: tinic

elle-app/elle-frontend/src/App.vue

@@ -23,6 +23,7 @@ import {
   removeDiameter,
   toDisplayLength
 } from './composables/useUnits'
+import { useCannedCyclePitch } from './composables/useCannedCyclePitch'
 import { useFormatters } from './composables/useFormatters'
 import { useHALLifecycle } from './composables/useHALLifecycle'
 import { useMachineStatus } from './composables/useMachineStatus'
@@ -138,10 +139,6 @@ const { machineStatus, statusDisplay } = useMachineStatus(
   selectedMenu
 )
 
-// Internal
-const xpitchlabel = ref('…')
-const zpitchlabel = ref('…')
-const xpitchangle = ref(0)
 // Get settings from composable
 const {
   metric,
@@ -163,6 +160,9 @@ const selectedFeedMode = ref(FeedMode.longitudinal)
 const selectedDirectionMode = ref(DirectionMode.forward)
 const selectedCannedCycle = ref(CannedCycle.none)
 
+const { xpitchlabel, zpitchlabel, xpitchangle, updatePitchFromThread, updatePitchFromTurning } =
+  useCannedCyclePitch({ threadPitch, threadXDepth, threadZDepth, metric, xpitch, zpitch })
+
 const { preview, showOperationPreviewDialog, onPreviewContinue, onPreviewCancel } =
   useOperationPreview()
 const showBackplot = ref(false)
@@ -643,40 +643,6 @@ const threadResetClicked = () => {
   updatePitchFromThread()
 }
 
-const updatePitchFromThread = () => {
-  // Update PZ (longitudinal) with thread pitch parameter
-  if (threadPitch.value !== null) {
-    zpitch.value = Math.abs(threadPitch.value)
-    if (metric.value) {
-      zpitchlabel.value = `${threadPitch.value}mm`
-    } else {
-      // In imperial mode, show TPI (threads per inch)
-      const tpi = 1 / threadPitch.value
-      // Show integer if close to whole number, otherwise 1 decimal place
-      const rounded = Math.round(tpi)
-      const formatted = Math.abs(tpi - rounded) < 0.1 ? rounded.toString() : tpi.toFixed(1)
-      zpitchlabel.value = `${formatted} TPI`
-    }
-  } else {
-    zpitchlabel.value = '…'
-  }
-
-  // If we have Z depth (compound threading), calculate cross feed
-  if (threadZDepth.value !== null && threadZDepth.value !== 0 && threadXDepth.value !== null) {
-    // Calculate compound angle from X and Z depths
-    const angle =
-      Math.atan2(Math.abs(threadZDepth.value), Math.abs(threadXDepth.value)) * (180 / Math.PI)
-    const angleRad = angle * (Math.PI / 180)
-    xpitch.value = threadPitch.value ? Math.abs(threadPitch.value * Math.tan(angleRad)) : 0.001
-    xpitchlabel.value = `${angle.toFixed(1)}°`
-    xpitchangle.value = angle
-  } else {
-    // Straight threading - minimal cross feed
-    xpitch.value = 0.001 // Very small value for threading
-    xpitchangle.value = 0
-  }
-}
-
 const threadMetricClicked = () => {
   treatOffClickAsEnter()
   metric.value = !metric.value
@@ -778,12 +744,6 @@ const turningResetClicked = () => {
   updatePitchFromTurning()
 }
 
-const updatePitchFromTurning = () => {
-  // Minimal cross feed for turning
-  xpitch.value = 0.001
-  xpitchangle.value = 0
-}
-
 onMounted(async () => {
   // Load settings first (includes tool table and current tool)
   await loadSettings()

elle-app/elle-frontend/src/composables/useCannedCyclePitch.ts

@@ -0,0 +1,70 @@
+import { ref, type Ref } from 'vue'
+
+interface Deps {
+  threadPitch: Ref<number | null>
+  threadXDepth: Ref<number | null>
+  threadZDepth: Ref<number | null>
+  metric: Ref<boolean>
+  xpitch: Ref<number>
+  zpitch: Ref<number>
+}
+
+// Computes the feed-axis pitch values shown in the DRO when a threading or
+// turning cycle is armed. Owns the human-readable labels for PX/PZ, plus the
+// compound angle derived from threading X/Z depths.
+export function useCannedCyclePitch(deps: Deps) {
+  const { threadPitch, threadXDepth, threadZDepth, metric, xpitch, zpitch } = deps
+
+  const xpitchlabel = ref('…')
+  const zpitchlabel = ref('…')
+  const xpitchangle = ref(0)
+
+  const formatPitchLabel = (pitchMm: number): string => {
+    if (metric.value) {
+      return `${pitchMm}mm`
+    }
+    // Imperial convention: show TPI. Round to int if within 0.1, else 1 decimal.
+    const tpi = 1 / pitchMm
+    const rounded = Math.round(tpi)
+    const formatted = Math.abs(tpi - rounded) < 0.1 ? rounded.toString() : tpi.toFixed(1)
+    return `${formatted} TPI`
+  }
+
+  const updatePitchFromThread = () => {
+    const pitch = threadPitch.value
+    if (pitch !== null) {
+      zpitch.value = Math.abs(pitch)
+      zpitchlabel.value = formatPitchLabel(pitch)
+    } else {
+      zpitchlabel.value = '…'
+    }
+
+    // Compound threading: derive cross feed + angle from Z depth and X depth.
+    if (threadZDepth.value !== null && threadZDepth.value !== 0 && threadXDepth.value !== null) {
+      const angle =
+        Math.atan2(Math.abs(threadZDepth.value), Math.abs(threadXDepth.value)) * (180 / Math.PI)
+      const angleRad = angle * (Math.PI / 180)
+      xpitch.value = pitch ? Math.abs(pitch * Math.tan(angleRad)) : 0.001
+      xpitchlabel.value = `${angle.toFixed(1)}°`
+      xpitchangle.value = angle
+    } else {
+      // Straight threading — minimal cross feed.
+      xpitch.value = 0.001
+      xpitchangle.value = 0
+    }
+  }
+
+  const updatePitchFromTurning = () => {
+    // Minimal cross feed; turning uses the Z axis pitch from feedRate directly.
+    xpitch.value = 0.001
+    xpitchangle.value = 0
+  }
+
+  return {
+    xpitchlabel,
+    zpitchlabel,
+    xpitchangle,
+    updatePitchFromThread,
+    updatePitchFromTurning
+  }
+}