Refactor global unit change handling and modal event setup; improve code organization and readability

Author: cs-util

src/index.js

@@ -1794,6 +1794,66 @@ function cacheDom() {
   dom.distanceConfirmBtn = $('distanceConfirmBtn');
 }
 
+function handleGlobalUnitChange(e) {
+  state.preferredUnit = e.target.value;
+  // Refresh visualizations that use the unit
+  drawReferenceVisualization();
+  updateMeasureLabel();
+
+  // Also update all pinned measurement labels
+  state.measureMode.pinned.forEach((item) => {
+    if (item.ui.label) {
+      const sourceIcon = item.source === 'manual' ? '📏' : '📡';
+      item.ui.label.setIcon(L.divIcon({
+        className: 'measure-label',
+        html: createDistanceLabelHtml({
+          meters: item.meters,
+          color: COLORS.MEASURE,
+          icon: sourceIcon,
+          showPin: false,
+          extraClass: 'distance-label--measure',
+        }),
+        iconAnchor: [0, 0],
+      }));
+    }
+  });
+
+  saveSettings();
+}
+
+function setupModalEventHandlers() {
+  // Distance modal handlers
+  if (dom.distanceCancelBtn) {
+    dom.distanceCancelBtn.addEventListener('click', handleDistanceModalCancel);
+  }
+  if (dom.distanceConfirmBtn) {
+    dom.distanceConfirmBtn.addEventListener('click', handleDistanceModalConfirm);
+  }
+  if (dom.distanceInput) {
+    dom.distanceInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        handleDistanceModalConfirm();
+      }
+    });
+    dom.distanceInput.addEventListener('input', () => {
+      dom.distanceError.classList.add('hidden');
+    });
+  }
+  if (dom.distanceModal) {
+    dom.distanceModal.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        handleDistanceModalCancel();
+      }
+    });
+    // Close on backdrop click
+    dom.distanceModal.addEventListener('click', (e) => {
+      if (e.target === dom.distanceModal) {
+        handleDistanceModalCancel();
+      }
+    });
+  }
+}
+
 function setupEventHandlers() {
   dom.mapImageInput.addEventListener('change', handleImageImport);
   dom.addPairButton.addEventListener('click', beginPairMode);
@@ -1812,32 +1872,7 @@ function setupEventHandlers() {
 
   // Global unit selector
   if (dom.globalUnitSelect) {
-    dom.globalUnitSelect.addEventListener('change', (e) => {
-      state.preferredUnit = e.target.value;
-      // Refresh visualizations that use the unit
-      drawReferenceVisualization();
-      updateMeasureLabel();
-
-      // Also update all pinned measurement labels
-      state.measureMode.pinned.forEach((item) => {
-        if (item.ui.label) {
-          const sourceIcon = item.source === 'manual' ? '📏' : '📡';
-          item.ui.label.setIcon(L.divIcon({
-            className: 'measure-label',
-            html: createDistanceLabelHtml({
-              meters: item.meters,
-              color: COLORS.MEASURE,
-              icon: sourceIcon,
-              showPin: false,
-              extraClass: 'distance-label--measure',
-            }),
-            iconAnchor: [0, 0],
-          }));
-        }
-      });
-
-      saveSettings();
-    });
+    dom.globalUnitSelect.addEventListener('change', handleGlobalUnitChange);
   }
 
   // Scale and measure mode handlers
@@ -1857,36 +1892,7 @@ function setupEventHandlers() {
     dom.clearMeasurementsButton.addEventListener('click', clearAllMeasurements);
   }
 
-  // Distance modal handlers
-  if (dom.distanceCancelBtn) {
-    dom.distanceCancelBtn.addEventListener('click', handleDistanceModalCancel);
-  }
-  if (dom.distanceConfirmBtn) {
-    dom.distanceConfirmBtn.addEventListener('click', handleDistanceModalConfirm);
-  }
-  if (dom.distanceInput) {
-    dom.distanceInput.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') {
-        handleDistanceModalConfirm();
-      }
-    });
-    dom.distanceInput.addEventListener('input', () => {
-      dom.distanceError.classList.add('hidden');
-    });
-  }
-  if (dom.distanceModal) {
-    dom.distanceModal.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        handleDistanceModalCancel();
-      }
-    });
-    // Close on backdrop click
-    dom.distanceModal.addEventListener('click', (e) => {
-      if (e.target === dom.distanceModal) {
-        handleDistanceModalCancel();
-      }
-    });
-  }
+  setupModalEventHandlers();
 }
 
 function saveSettings() {