code comments

Author: driskull

coordinate-calcite-js/index.html

@@ -70,6 +70,7 @@
   });
 
   const customWidget = document.createElement("div");
+  // create the Calcite HTML
   customWidget.innerHTML = `
     <div class="custom-coordinate-conversion">
 
@@ -96,7 +97,7 @@
 watch(
   () => vm.conversions.getItemAt(0)?.format,
   (format) => updateFormats(format),
-  { initial: true }
+  { initial: true } // initial: true will trigger the callback immediately
 );
 watch(
   () => vm.conversions.getItemAt(0)?.displayCoordinate,
@@ -120,10 +121,10 @@
 
 coordinateSelect.addEventListener("calciteSelectChange", (event) => {
   const value = event.target.value;
-  const format = vm.formats.find((format) => format.name === value);
-  const newConversion = new Conversion({ format });
+  const format = vm.formats.find((format) => format.name === value); // find new format
+  const newConversion = new Conversion({ format }); // create new conversion
   vm.conversions.removeAt(0);
-  vm.conversions.add(newConversion, 0);
+  vm.conversions.add(newConversion, 0); // place conversion at the top
 });
 
 coordinateMode.addEventListener("calciteSegmentedControlChange", (event) => {
@@ -132,21 +133,23 @@
         </calcite-accordion-item>
         <calcite-accordion-item heading="4. Capturing a point"
           description="Calling a ViewModel method and navigating to the returned point" icon-start="pin">
-          <esri-demo-code language="js" source="coordinateEditable.addEventListener(
+          <esri-demo-code language="js" source="// when inline editable is changed
+coordinateEditable.addEventListener(
   &quot;calciteInlineEditableEditConfirm&quot;,
   () =&gt; {
     reverseConvert();
   }
 );
 
+// convert string coordinate to map point
 async function reverseConvert() {
   coordinateEditable.editingEnabled = false;
   const value = coordinateInput.value;
   try {
     const point = await vm.reverseConvert(value, activeFormat);
     vm.view.goTo(point);
   } catch (e) {
-    coordinateInput.status = &quot;invalid&quot;;
+    coordinateInput.status = &quot;invalid&quot;; // set inline editable to invalid
   }
 }"></esri-demo-code>
         </calcite-accordion-item>

coordinate-fluent-react-js/index.html

@@ -56,7 +56,7 @@
 import { useMapView } from "./hooks/useMapView";
 import { useCoordinateConversionVM } from "./hooks/useCoordinateConversionVM";
 
-// component to handle the Fluent UI coordinate conversion
+// new Fluent UI coordinate component being created
 import FluentCoordinateConversion from "./components/FluentCoordinateConversion";
 
 function App() {
@@ -96,6 +96,7 @@
 
   useEffect(() => {
     const handle = watch(
+      // watch the displayCoordinate property on the first conversion
       () => vm?.conversions?.getItemAt(0)?.displayCoordinate,
       (displayCoordinate) =>
         setActiveDisplayCoordinate(displayCoordinate ?? ""),