Merge branch 'feat-map' into settings-reorg

RyanBirtch-aot · Jul 16, 2024 · 4df8c98 · 4df8c98
2 parents 13a4ae6 + 6257065
commit 4df8c98
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 42 deletions.
diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts
@@ -15,6 +15,7 @@ export default class Component extends (FieldComponent as any) {
       label: 'Map',
       key: 'map',
       input: true,
+      defaultvalue: { features: [] },
       ...extend,
     });
   }
@@ -72,40 +73,41 @@ export default class Component extends (FieldComponent as any) {
     }
 
     const { numPoints, defaultZoom, readOnlyMap, center } = this.component;
+    const { readOnly: viewMode } = this.options;
 
-    let parsedCenter;
-    if (center) {
-      parsedCenter = JSON.parse(center).latlng;
+    let initialCenter;
+    if (center && center.features && center.features[0]) {
+      initialCenter = center.features[0].coordinates;
     }
 
     this.mapService = new MapService({
       mapContainer,
       drawOptions,
-      center: center ? parsedCenter : DEFAULT_CENTER,
+      center: center ? initialCenter : DEFAULT_CENTER,
       form,
       numPoints,
       defaultZoom,
       readOnlyMap,
       onDrawnItemsChange: this.saveDrawnItems.bind(this),
+      viewMode,
     });
 
     // Load existing data if available
-    if (this.dataValue) {
+    if (this.dataValue && this.dataValue.features) {
       try {
-        const parsedValue = JSON.parse(this.dataValue);
-        this.mapService.loadDrawnItems(parsedValue);
+        this.mapService.loadDrawnItems(this.dataValue.features);
       } catch (error) {
         console.error('Failed to parse dataValue:', error);
       }
     }
   }
 
   saveDrawnItems(drawnItems: L.Layer[]) {
-    const value = drawnItems.map((layer: any) => {
+    const features = drawnItems.map((layer: any) => {
       if (layer instanceof L.Marker) {
         return {
           type: 'marker',
-          latlng: layer.getLatLng(),
+          coordinates: layer.getLatLng(),
         };
       } else if (layer instanceof L.Rectangle) {
         return {
@@ -115,38 +117,34 @@ export default class Component extends (FieldComponent as any) {
       } else if (layer instanceof L.Circle) {
         return {
           type: 'circle',
-          latlng: layer.getLatLng(),
+          coordinates: layer.getLatLng(),
           radius: layer.getRadius(),
         };
       } else if (layer instanceof L.Polygon) {
         return {
           type: 'polygon',
-          latlngs: layer.getLatLngs(),
+          coordinates: layer.getLatLngs(),
         };
       } else if (layer instanceof L.Polyline) {
         return {
           type: 'polyline',
-          latlngs: layer.getLatLngs(),
+          coordinates: layer.getLatLngs(),
         };
       }
     });
 
-    // Convert to JSON string
-    const jsonValue =
-      this.component.numPoints === 1
-        ? JSON.stringify(value[0])
-        : JSON.stringify(value);
-    this.setValue(jsonValue);
+    this.setValue({ features });
   }
 
   setValue(value) {
     super.setValue(value);
 
     // Additional logic to render the saved data on the map if necessary
-    if (this.mapService && value) {
+    if (this.mapService && value && value.features) {
       try {
-        const parsedValue = JSON.parse(value);
-        this.mapService.loadDrawnItems(parsedValue);
+        //const parsedValue = JSON.parse(value);
+
+        this.mapService.loadDrawnItems(value.features);
       } catch (error) {
         console.error('Failed to parse value:', error);
       }

diff --git a/components/src/components/Map/services/MapService.ts b/components/src/components/Map/services/MapService.ts
@@ -9,13 +9,26 @@ const DEFAULT_LAYER_ATTRIBUTION =
 const DEFAULT_MAP_ZOOM = 13;
 const DECIMALS_LATLNG = 5; // the number of decimals of latitude and longitude to be displayed in the marker popup
 const COMPONENT_EDIT_CLASS = 'component-edit-tabs';
-const FORM_REVIEW_CLASS = 'review-form';
+
+interface MapServiceOptions {
+  mapContainer: HTMLElement;
+  center: [number, number]; // Ensure center is a tuple with exactly two elements
+  drawOptions: any;
+  form: HTMLCollectionOf<Element>;
+  numPoints: number;
+  defaultZoom?: number;
+  readOnlyMap?: boolean;
+  onDrawnItemsChange: (items: any) => void; // Support both single and multiple items
+  viewMode?: boolean;
+}
+
 class MapService {
   options;
   map;
   drawnItems;
   constructor(options) {
     this.options = options;
+
     if (options.mapContainer) {
       const { map, drawnItems } = this.initializeMap(options);
       this.map = map;
@@ -37,9 +50,19 @@ class MapService {
       });
     }
   }
-  initializeMap(options) {
-    let { mapContainer, center, drawOptions, form, defaultZoom, readOnlyMap } =
-      options;
+
+  initializeMap(options: MapServiceOptions) {
+    let {
+      mapContainer,
+      center,
+      drawOptions,
+      form,
+      defaultZoom,
+      readOnlyMap,
+      viewMode,
+    } = options;
+
+
     if (drawOptions.rectangle) {
       drawOptions.rectangle.showArea = false;
     }
@@ -54,18 +77,17 @@ class MapService {
     let drawnItems = new L.FeatureGroup();
     map.addLayer(drawnItems);
     // Add Drawing Controllers
-    const formReviewNode = document.getElementsByClassName(FORM_REVIEW_CLASS);
-    if (
-      !readOnlyMap ||
-      !(formReviewNode && this.hasChildNode(formReviewNode[0], mapContainer))
-    ) {
-      let drawControl = new L.Control.Draw({
-        draw: drawOptions,
-        edit: {
-          featureGroup: drawnItems,
-        },
-      });
-      map.addControl(drawControl);
+
+    if (!readOnlyMap) {
+      if (!viewMode) {
+        let drawControl = new L.Control.Draw({
+          draw: drawOptions,
+          edit: {
+            featureGroup: drawnItems,
+          },
+        });
+        map.addControl(drawControl);
+      }
     }
     // Checking to see if the map should be interactable
     const componentEditNode =
@@ -77,7 +99,6 @@ class MapService {
         if (this.hasChildNode(componentEditNode[0], mapContainer)) {
           map.dragging.enable();
           map.scrollWheelZoom.enable();
-          console.log(map);
           map.invalidateSize(true);
         }
       }
@@ -126,15 +147,15 @@ class MapService {
     items.forEach((item) => {
       let layer;
       if (item.type === 'marker') {
-        layer = L.marker(item.latlng);
+        layer = L.marker(item.coordinates);
       } else if (item.type === 'rectangle') {
         layer = L.rectangle(item.bounds);
       } else if (item.type === 'circle') {
-        layer = L.circle(item.latlng, { radius: item.radius });
+        layer = L.circle(item.coordinates, { radius: item.radius });
       } else if (item.type === 'polygon') {
-        layer = L.polygon(item.latlngs);
+        layer = L.polygon(item.coordinates);
       } else if (item.type === 'polyline') {
-        layer = L.polyline(item.latlngs);
+        layer = L.polyline(item.coordinates);
       }
       if (layer) {
         drawnItems.addLayer(layer);